toggleClass搞砸了一些东西

我用漂亮的复选框插件玩，并有问题。插件可以在这里看到http://aaronweyenberg.com/90/pretty-checkboxes-with-jquery toggleClass搞砸了一些东西

正如你所看到的，这使用两个链接来选择和取消选择。我希望它只使用一个链接，然后改变类，使其在下次单击时以另一种方式工作。

它应该很简单。我一直试图让它与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"); 
    } 

    ); 

});

此作品在一定程度上。这些类切换得很好，但其余的代码只在第一次运行时才起作用。随后的所有点击只是切换链接的类别，而没有其他内容。

有没有人有任何想法，为什么这是？

来源

2010-04-22 Mathias Nielsen

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

只是改变一个元素的类不会改变其上注册的事件监听器。您已经准备好注册处理程序，以便在准备时匹配$(".checklist .checkbox-select")的元素进行选择，并且在元素从.checkbox-select更改为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); 
});

来源

2010-04-22 14:32:28 bobince

非常感谢。我应该提到，我是JavaScript和jquery的新手。所以我确实认为它应该每次都进行评估。但是现在我知道一些关于事件监听器的东西，所以谢谢你，你和Pointy。真的很好的例子，但它有一个小呃。我不知道这是否是故意的，但我只能将一个元素标记为选中状态，就像单选按钮一样。所以我改了一行： var selected = $（'。checklist input：checked'）。length！== 0; 至： var selected = $（this）.siblings（'：checkbox'）。attr（'checked'）; 现在它工作得很好。：d – 2010-04-22 21:34:58

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

而不是那个设置，有几种方法可以去。首先，您可以绑定一个事件处理程序，然后使用简单的“hasClass（）”测试检查该处理程序中的当前类。这很简单。

另一种方法是使用“代理”或“实时”机制，它确实具有您当前代码似乎希望的动态解释行为。

来源

2010-04-22 14:29:49 Pointy

toggleClass搞砸了一些东西

回答

相关问题