JQuery Newbie Refining toggleClass？

我有這個片段（下面）的jQuery，它爲我的每個元素添加了一個單獨的CSS選擇器，它的類爲'.filter-name'這個工作，我很滿意它的功能。JQuery Newbie Refining toggleClass？

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 using jQuery in noConflict();因此是jQuery選擇器。

來源

2013-09-27 iamgraeme

我會建議使用相同的所有元素的類，並且可能使用每個標題元素唯一的id。 – techfoobar

供參考：未來，可以在http://codereview.stackexchange.com/上查詢。 – ajp15243

@techfoobar他已經有了一個普通的類'.filter-name'。只是他沒有使用它。 –

如何添加點擊處理程序.filter-name，

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

來源

2013-09-27 13:11:51

代表你的事件處理：

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

你已經依靠.filter-name生成所有.title#類，所以只是用它來連接你的事件處理程序。

您應該用所有.filter-name元素的最低共同祖先替換document.body。

來源

2013-09-27 13:11:17

爲什麼事件代表團？我無法找到他是否提到過在OP中動態添加它。 –

在這種情況下是否需要將事件附加到身體？ – Huangism

@Vega一個事件處理程序與* N *事件處理程序。 –

您的解決方案將這樣的工作，

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

我建議你給類名稱爲所有標題爲.title，那麼你可以減少代碼，

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

來源

2013-09-27 13:12:16 clu3Less

JQuery Newbie Refining toggleClass？

回答

相關問題