Javascript 检查元素是否有类，然后前置和元素

我在这里试图实现的是，当用户单击某个元素时，该元素将被隐藏，一旦发生这种情况，我希望在包含该元素的元素中预先添加另一个元素，以使所有这些项目再次可见

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>');
       }

基本上，如果容器中的一个元素被隐藏，我希望显示一个重置按钮，如果不删除该重置按钮…

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();
});

功能检查重置按钮（）{
var resetLeft=$（'#left.resetLeft'）。长度===0；
var resetRight=$（'#left.resetRight'）。长度===0；
var leftHidden=$（'#left.module.hidden'）。长度！==0；
var rightHidden=$（'#right.module.hidden'）。长度！==0；
if（leftHidden&！resetLeft）{
//如果需要，请确保添加了按钮，但该按钮尚未出现
$（'左'）.prepend（'重置左'）；
}如果（！leftHidden），则为else{
//如果没有隐藏的项目，请确保删除按钮
//如果没有按钮存在，这将什么也不做
$（'#left.resetLeft'）.remove（）；
}
if（righhidden&！resetRight）{
$（'#right'）。前置（'Reset right'）；
}如果（！rightHidden），则为else{
$（'#right.resetRight'）.remove（）；
}
}
//重置按钮的事件处理程序
//使用委托事件处理，因此即使重置按钮
//被删除并重新创建
$（“#左”）。在（“单击”，“重置左”，函数（）上）{
$（“#left.hidden”）.removeClass（“hidden”）；
$（“#left.resetLeft”）.remove（）；
});
$（“#右”）。在（“单击“，”.resetRight“，函数（）上）{
$（“#right.hidden”）.removeClass（“hidden”）；
$（“#right.resetRight”）.remove（）；
});

---

仅供参考，如果我们可以更改HTML以使用更多的通用类，则左侧和右侧的单独代码可以组合成一段通用代码。

隐藏

.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();
       });
    }
});

$（'#left.module'）。在（'click'，function（）上{
$（this.addClass（'hidden'）；
var parent=$（this）.closest（“#左”）；
如果（！parent.find（'.resetLeft'））{
var res=$（“”，{'class'：'resetLeft'，text:'resetLeft'}）；
父项追加（res）；
res.one（'点击'，函数（）{
$（this）.closest（'#left'）.find（'.module'）.show（）；
$（this.remove（）；
});
}
});

---

对右侧重复

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

---

它首先隐藏两个重置按钮div。然后它使用

.hideLeft#left{display:none；}

和

.hideLeft#right.resetLeft{display:block；}

隐藏左侧模块，并在将

.hideLeft

添加到这两个元素的下一个元素时显示重置按钮。不久前，我受到“现代化”的启发，认为这是一种干净利落的替代方式。让我知道你的想法，如果你觉得有帮助，如果你有任何问题：）

你能分享面板的html和隐藏元素吗？我喜欢这种方式，它似乎有效。唯一的问题是，当单击resetLeft时，它不会使该#left容器中的所有元素可见。？@EasyBB-我添加了两个事件处理程序来处理reset按钮。这假设您使项目可见的方式是删除

隐藏的

类。如果有不同的方法，则必须修改代码的该部分。您必须在适当的时间调用

checkResetButtons（）

函数。

$('#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();
       });
    }
});