0

我有这个 jQuery 片段（如下），它为我的每个元素添加了一个单独的 CSS 选择器，'.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 做的。

ps 使用 jQuery in noConflict();，因此使用 jQuery 选择器。

4

3 回答 3

4

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

jQuery('.filter-name').click(function () {
   //using this ensure that is toggling the correct element
   jQuery(this).toggleClass('clicked'); 
});
于 2013-09-27T13:11:51.543 回答
1

您的解决方案将像这样工作，

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

我建议您为所有标题提供类名，因为.title这样您就可以将代码简化为，

jQuery('.title').click(function(){
            jQuery(this).toggleClass('clicked');
});
于 2013-09-27T13:12:16.123 回答
0

委托您的事件处理：

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

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

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

于 2013-09-27T13:11:17.670 回答