toggleClass搞砸了

Question

我在玩Pretty-checkboxes-plugin時遇到問題。 可以在這里看到該插件http://aaronweyenberg.com/90/pretty-checkboxes-with-jquery

如您所見，這使用兩個鏈接進行選擇和取消選擇。 我希望它僅使用一個鏈接，然后更改類以使其在下次單擊時以另一種方式工作。

它應該足夠簡單。 我一直在嘗試使其與toggleClass一起使用。

我只是放入toggleClass語句，所以代碼如下所示：

$(document).ready(function() {

/* see if anything is previously checked and reflect that in the view*/
$(".checklist input:checked").parent().addClass("selected");

/* handle the user selections */
$(".checklist .checkbox-select").click(
function(event) {
  event.preventDefault();
  $(this).parent().addClass("selected");
  $(this).parent().find(":checkbox").attr("checked","checked");
  $(this).toggleClass("checkbox-select checkbox-deselect");

 }

);

$(".checklist .checkbox-deselect").click(
 function(event) {
  event.preventDefault();
   $(this).parent().removeClass("selected");
   $(this).parent().find(":checkbox").removeAttr("checked");
   $(this).toggleClass("checkbox-select checkbox-deselect");
   }

   );

});

這在一定程度上起作用。 這些類可以很好地切換，但是其余代碼僅在第一次運行時起作用。 以后所有的單擊都僅使類切換鏈接，而沒有其他任何事情。

有誰知道為什么會這樣嗎？

Answer 1

設置事件處理程序的方式使我認為您正在想象將基於“類”設置動態調用處理程序。 實際上，在調用“就緒”處理程序時，有些東西會根據類設置靜態綁定處理程序。 類分配的更改與那些處理程序的調用方式無關。

除了該設置之外，還有兩種方法可供選擇。 首先，您可以綁定一個事件處理程序，然后使用簡單的“ hasClass（）”測試檢查該處理程序中的當前類。 那將非常簡單。

另一種方法是使用“委托”或“實時”機制，它們確實具有您當前代碼似乎希望的動態解釋行為。

Answer 2

$(this).toggleClass("checkbox-select checkbox-deselect");

僅更改元素的類不會更改在其上注冊的事件偵聽器。 您已在就緒時注冊了用於選擇與$(".checklist .checkbox-select")匹配的元素的處理程序，並且在元素從.checkbox-select更改為checkbox-deselect之后，該處理程序（而不是取消選擇處理程序）仍然存在。 checkbox-deselect 。

如果您確實需要事件時綁定，則需要live()函數而不是普通的click()綁定。 但是，我建議您最好使用一個函數：

$('#checktoggler').click(function() {
    // select all, unless all are already selected, in which case select none
    var selected= $('.checklist input:checked').length!==0;
    selected= !selected;

    $(this).parent().toggleClass('selected', selected);
    $(this).parent().find(":checkbox").attr('checked', selected);
    $(this).toggleClass('checkbox-select checkbox-deselect', selected);
});