Question

我有简单的HTML：

ul > li > button

并有一些JavaScript代码：

$('.side-filters .filters_list li').each(function(){
    $(this).find('button').click(function(){

        var arrList = $('.side-filters .filters_list li .active').map(function(){
            return $(this).attr('id');
        }).get();

        if($(this).hasClass('active')) {
            $(this).removeClass('active');

        } else {
            $(this).addClass('active');
        }
    });
});

如果我点击某个按钮，请将该类添加到该按钮，如果再次点击，则删除该课程。

我需要现场计数元素，而且课程“活跃”。如果至少有一个给定的ul类'someclass'并且如果我再次单击并且没有活动类的元素，则从UI中删除'someclass'。

我该怎么做？

Answer 1

无需遍历元素并为每个按钮添加单击。添加一个监听器。

//listen for click on a button
$('.side-filters', "click", ".filters_list li button", function(){

    //toggle the active class on the button
    var button = $(this).toggleClass("active");

    //see if anything is selected
    var hasSelection = $('.side-filters .filters_list li .active').length > 0;

    //toggle a class on the closest ul based on if anything is selected.
    button.closest("ul").toggleClass("someclass", hasSelection);

});

参考文献：

Answer 2

您可以添加此function ()

function someclass () {
   var count = $('.active').length;
   if (count >= 1) {
       $('ul').addClass('clasHere')
   } else {
       $('ul').removeClass('clasHere')
   }
}

监视元素使用jQuery按类计算

2 个答案: