切换 li .active class

Question

下面fiddle中的 li .active 开关不起作用。当我删除输入元素中的 id="Colour54" 时，它起作用了。

这是为什么？我怎样才能使这项工作。

    $(this).toggleClass("active");

https://jsfiddle.net/f0r8xd9b/1/

Answer 1

您定位到错误的元素。在您的第一个 fiddle 中，如果您单击项目符号，它就可以正常工作。

https://jsfiddle.net/f0r8xd9b/12/

我将你的 jQuery 代码更改为：

$( "ul li label").click(function() {
    $(this).toggleClass("active");
});

Answer 2

这是因为您在标签上的点击事件会冒泡到列表项，而且它附加到您的复选框输入。这会触发您的函数两次，从而一次来回切换。你真的需要 <li> 来收听 click 还是 label？

而且对于此用例，您根本不需要 Javascript。使用 CSS!

:checked + label {
    color: red;
}

如果出于某种奇怪的原因你坚持使用 jQuery，给你（快速而肮脏的解决方案）：

$(document).ready(function() {
    $("ul li").on("click", function(event) {
        if (event.target.nodeName.toLowerCase()=="label") { $(this).toggleClass("active"); }
        $(this).toggleClass("active");
    });
});

https://jsfiddle.net/f0r8xd9b/11/

Answer 3

问题是，因为事件冒泡，函数被调用了两次，所以 class 被切换然后在同一瞬间再次取消切换。

您可以在 JavaScript 中修复此问题，但我更愿意建议仅 CSS 的解决方案：

input[type="checkbox"] {
    display: none;
}

input[type="checkbox"]:checked + label {
    color:red;
}

<ul>
    <li>
        <input id="Colour54" onclick="processFilter();" type="checkbox" name="1[Value][][@id]" value="54" />
        <label for="Colour54" style="font-weight: normal;">zwart</label>
    </li>
</ul>

虽然有一点不同，因为该解决方案只为标签设置样式，而不是 li。所以这是您的版本中的修复：

$( "input[type='checkbox']" ).click(function(event) {
  $("ul li").toggleClass("active");
});

input[type="checkbox"] {
    display: none;
}

.active{
    color:red;
}

<ul>
    <li>
        <input id="Colour54" onclick="processFilter();" type="checkbox" name="1[Value][][@id]" value="54" />
        <label for="Colour54" style="font-weight: normal;">zwart</label>
    </li>
</ul>

基本上，它将点击事件处理程序绑定到复选框。这样，它会在您切换复选框时执行（也可在您单击标签时执行）。

切换 li .active class

Toggle li .active class

jquery

toggle