-3

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

<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>
4

3 回答 3

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);
    }
});
于 2012-08-23T10:07:06.810 回答
1

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

如果您要更改标签以具有复选框和文本跨度 - 并在那里应用您的样式，即：

<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（您可以与标签内的复选框分开访问文本）。此外，单击文本的语义仍然选中/取消选中复选框。

于 2012-08-23T10:09:21.927 回答
0

如果你想在这两个类之间切换

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

应该这样做

于 2012-08-23T09:58:38.000 回答