Question

我的功能无法正常工作。有时它有时不工作

<head>
<script type="text/javascript" src="jquery-1.7.2.js"></script>

<script type="text/javascript">


$(function(){

    $('label').click(function(){
    $(this).toggleClass('jaja papa')
    }   )


    })

</script>

</head>

<body>

<label class="jaja">
<input type="checkbox" />
click
</label>

</body>

Answer 1

当您点击标签时，您也点击了复选框，因为这是标签的作用。复选框的单击事件依次冒泡到标签。因此，标签的单击处理程序被触发两次，类被切换两次，实际上什么都不做。

您必须跟踪点击处理程序被调用的次数，并且仅在第一次执行时才执行：http://jsfiddle.net/ZVCM5/2/。

$('label').click(function f(e) {
    if(!f.triggered) {  // only if not already triggered for this time
        f.triggered = true;
        $(this).toggleClass('jaja papa');
        setTimeout(function() {
            f.triggered = false;  // reset after both clicks are done
        }, 0);
    }
});

Answer 2

一种可能的解决方案，涉及稍微改变你的标记（为了更好的恕我直言！）

如果您要更改标签以包含复选框和带文本的范围 - 而是在那里应用您的样式，即：

<label>
    <input type="checkbox">
    <span class="papa">Test</span>
</label>

然后这个jQuery工作：

$('label>:checkbox').click(function(){
    $(this).next('span').toggleClass('jaja papa')
});

实例：http://jsfiddle.net/JHwBP/

此处的优点是您有更多可寻址的HTML（您可以从标签内的复选框中单独获取文本）。此外，单击文本的语义仍然会选中/取消选中复选框。

Answer 3

如果您想在这两个班级之间切换

$('label').click(function(){
    $(this).toggleClass('jaja').toggleClass('papa');
    });

应该这样做

toggleClass函数无法正常工作

3 个答案: