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