Question

我在标签元素上使用以下Jquery来添加或删除一个类，具体取决于它的当前状态。

$('label').click(function(){
if ($(this).hasClass('selected')){
    //alert('its classy');
    $(this).removeClass('selected')
} else {
    $(this).addClass('selected');
    //alert('its NOT classy');
    }
});

就我而言，它应该有效！但是在Firefox中，这需要双击，而在Chrome中它根本不起作用。

目前这是网页上唯一的任何类型的Javascript，所以它不会被任何插件或任何类似的东西打破。

元素的相关html如下所示： -

<label class="">Filter item<input type="checkbox" /></label>

提前致谢。

Answer 1

我猜你将input放在label内的原因是你可以根据复选框的状态切换“选定”类，并让它在点击将应用于标签或复选框。

这是保持label和input分开的唯一方法：http://jsfiddle.net/pkuCe/

$('#cb').change(function(){
    $("label[for=cb]").toggleClass("selected", this.checked);
});

这会根据复选框的状态在label上设置类，并且在单击复选框或标签时应该可以使用。

为什么您目前的做法不起作用？

从the specifications开始，在input代码中嵌套label没有任何问题：

for = idref [CS]


此属性显式将正在定义的标签与另一个控件相关联。如果存在，则此属性的值必须与同一文档中某个其他控件的id属性的值相同。 当缺席时，定义的标签与元素的内容相关联。

但是，当您拥有嵌套的click元素时，看起来问题源于input事件被触发两次（从而使切换无效）。我没有在所有浏览器上测试它，但似乎在FF8中发生。

尝试点击此示例中的标签：http://jsfiddle.net/cRnJS/

显然，点击label元素会在其关联的click上触发input事件（这就是检查/取消选中的原因）并且此事件会向上冒泡，从而再次触发它在父label中。

结论

HTML规范明智的说，您可以将input嵌套在label中，但将它们分开是明智的
使用change事件代替click。（注意：每个input）

Answer 2

我不知道为什么会出现这种情况，但您可以通过移动input之外的label来解决问题：

<label for="yourCheckbox">Filter item</label>
<input type="checkbox" id="yourCheckbox" />

这是一个working example。请注意，该示例使用@Matt在您的问题评论中建议的toggleClass。我在Chrome和Firefox上都尝试过，它看起来效果很好。

Answer 3

更改为

<label class="" for="FilterItem">Filter item</label>
<input id="FilterItem" type="checkbox" />

基本Jquery无法正常工作 - 请进行健全检查

3 个答案:

为什么您目前的做法不起作用？