检查元素是否有类然后前置和元素答案

【问题标题】：Checking if Element hasClass then prepend and Element检查元素是否有类然后前置和元素
【发布时间】：2013-04-10 02:53:03
【问题描述】：

我在这里想要实现的是，当用户单击一个元素时它会被隐藏，一旦发生这种情况，我想在包含元素内添加另一个元素以使所有这些项目再次可见。

var checkIfleft = $('#left .module'),checkIfright = $('#right .module');
   if(checkIfleft.hasClass('hidden')) {
       $('#left').prepend('<span class="resetLeft">Reset Left</span>');
        } else if(checkIfright.hasClass('hidden')) {
          right.prepend('<span class="resetRight">Reset Right</span>');
       }

我尝试了多种方法，老实说，我相信.length ==1 将是我最好的选择，因为我只想添加一个元素。我相信我上面的 JS 会在每次隐藏新项目时添加一个新元素（如果有效）。

其他尝试：

var checkIfleft = $('#left .module').hasClass('hidden'),
    checkIfright = $('#right .module').hasClass('hidden');
   if(checkIfleft.length== 1) {
       $('#left').prepend('<span class="resetLeft">Reset Left</span>');
        } else if(checkIfright.length== 1) {
          right.prepend('<span class="resetRight">Reset Right</span>');
       } 
      else if(checkIfleft.length==0){
          $('.resetLeft').remove()
      } else if (checkIfright.length==0){
         $('.resetRight').remove()
      }

基本上，如果容器内的一个元素被隐藏，我希望出现一个重置按钮，如果不删除该重置按钮...

【问题讨论】：

你能分享面板的html，以及隐藏的元素吗

标签： javascript jquery class prepend

【解决方案1】：

hasClass() 仅适用于集合中的第一项，因此它不能满足您的要求。它不会告诉您是否有任何项目具有该类别。

您可以这样做，而不是计算有多少隐藏项目，如果有 1 个或更多并且还没有重置按钮，则添加重置按钮。如果没有隐藏项目并且有重置按钮，则将其删除：

function checkResetButtons() {

    var resetLeft = $('#left .resetLeft').length === 0;
    var resetRight = $('#left .resetRight').length === 0;
    var leftHidden = $('#left .module .hidden').length !== 0;
    var rightHidden = $('#right .module .hidden').length !== 0;

    if (leftHidden && !resetLeft) {
        // make sure a button is added if needed and not already present
        $('#left').prepend('<span class="resetLeft">Reset Left</span>');
    } else if (!leftHidden) {
        // make sure button is removed if no hidden items
        // if no button exists, this just does nothing
        $('#left .resetLeft').remove();
    }

    if (rightHidden && !resetRight) {
        $('#right').prepend('<span class="resetRight">Reset Right</span>');
    } else if (!rightHidden) {
        $('#right .resetRight').remove();
    }

}

// event handlers for the reset buttons
// uses delegated event handling so it will work even though the reset buttons
// are deleted and recreated
$("#left").on("click", ".resetLeft", function() {
    $("#left .hidden").removeClass("hidden");
    $("#left .resetLeft").remove();
});

$("#right").on("click", ".resetRight", function() {
    $("#right .hidden").removeClass("hidden");
    $("#right .resetRight").remove();
});

仅供参考，如果我们可以将 HTML 更改为使用更多通用类，那么左右分开的代码可以合并为一段通用代码。

【讨论】：

我喜欢这种方式，它似乎有效。唯一的问题是，当单击 resetLeft 时，它不会使该#left 容器中的所有元素都可见。？
@EasyBB - 我添加了两个处理重置按钮的事件处理程序。这假定您使项目可见的方式是删除 hidden 类。如果有不同的方法，那么您将不得不修改该部分代码。您必须在适当的时候调用checkResetButtons() 函数。

【解决方案2】：

在隐藏.module 时添加重置按钮，如果它不存在的话：

$('#left .module').on('click', function() {
    $(this).addClass('hidden');
    var parent = $(this).closest('#left');
    if ( ! parent.find('.resetLeft') ) {
       var res = $('<span />', {'class': 'resetLeft', text : 'Reset Left'});
       parent.append(res);
       res.one('click', function() {
           $(this).closest('#left').find('.module').show();
           $(this).remove();
       });
    }
});

重复右侧！

【讨论】：

【解决方案3】：

我最近尝试使用 CSS 来做一些这样的事情，我觉得如果你不尝试为它制作动画，它会很好地工作。这是jsfiddle，我可以通过向两个模块的共同父级添加/删除“hideLeft”或“hideRight”类来隐藏一个模块并一次性显示重置按钮。

它首先隐藏两个重置按钮 div。然后它使用.hideLeft #left { display:none;} 和.hideLeft #right .resetLeft { display: block; } 隐藏左侧模块并在.hideLeft 被添加到两个元素所来自的任何元素时显示重置按钮。不久前，我受到了modernizr 的启发，并认为这是一种简洁的替代方式。让我知道你的想法，如果你觉得它有帮助，如果你有任何问题:)

【讨论】：