javascript - JQuery新手精炼toggleClass？

Question

我有这个 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 做的事情。

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