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

您设置事件处理程序的方式让我认为您正在想象将根据“类”设置动态调用处理程序。你实际上得到的是在调用“ready”处理程序时基于类设置静态绑定处理程序的东西。类的赋值的改变对那些没有任何影响。处理程序被调用。

除了这种设置外，还有几种方法可以解决。首先，您可以绑定单个事件处理程序，然后使用简单的“hasClass（）”测试检查该处理程序中的当前类。这很简单。

另一种方法是使用“委托”或“实时”机制，这些机制确实具有您当前代码所希望的动态解释行为。

Answer 2

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

只更改元素的类不会更改在其上注册的事件侦听器。您在准备时注册了处理程序以选择匹配$(".checklist .checkbox-select")的元素，并且在元素从.checkbox-select更改为checkbox-deselect之后，处理程序（而非取消选择处理程序）仍然存在。< / p>

如果您真的想要事件时绑定，则需要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);
});

toggleClass搞砸了什么

2 个答案: