Question

我有jQuery的这个片段（下面）为我的每个元素添加一个单独的CSS Selector，类为'.filter-name'这样可行，我对它的作用感到满意。

jQuery('.filter-name').each(function(i){
                jQuery(this).addClass('title'+(i+1));
            });

我的问题是，每次点击每个元素时都必须触发一个'clicked'类，这可以通过下面的代码完成，它可以工作，但在代码中看起来并不是很优雅。有没有办法改进这个？

jQuery('.title1').click(function(){
            jQuery('.title1').toggleClass('clicked');
        });
        jQuery('.title2').click(function(){
            jQuery('.title2').toggleClass('clicked');
        });
        jQuery('.title3').click(function(){
            jQuery('.title3').toggleClass('clicked');
        });
        jQuery('.title4').click(function(){
            jQuery('.title4').toggleClass('clicked');
        });
        jQuery('.title5').click(function(){
            jQuery('.title5').toggleClass('clicked');
        });
        jQuery('.title6').click(function(){
            jQuery('.title6').toggleClass('clicked');
        });

我试过了：

jQuery('.title1, .title2, .title3, .title4, .title5, .title6').click(function(){
                jQuery('.title1, .title2, .title3, .title4, .title5, .title6').toggleClass('clicked');
            });

但这只会同时触发所有这些，这不是我想要的jQuery。

p.s使用jQuery in noConflict();因此jQuery选择器。

Answer 1

如何将点击处理程序添加到.filter-name，

jQuery('.filter-name').click(function () {
   //using this ensure that is toggling the correct element
   jQuery(this).toggleClass('clicked'); 
});

Answer 2

您的解决方案可以这样工作，

jQuery('.title1, .title2, .title3, .title4, .title5, .title6').click(function(){
            jQuery(this).toggleClass('clicked');
});

我建议您将所有标题的类名称设为.title，然后将代码缩减为，

jQuery('.title').click(function(){
            jQuery(this).toggleClass('clicked');
});

Answer 3

委派您的活动处理：

jQuery(document.body).on('click', '.filter-name', function() {
    jQuery(this).toggleClass('clicked');
});

您已经依赖.filter-name生成所有.title#类，因此只需使用它来附加您的事件处理程序。

您应该将document.body替换为所有.filter-name元素的最低共同祖先。

JQuery新手精炼toggleClass？

3 个答案: