Question

以下小提琴中的li .active切换不起作用。当我在输入元素中删除id =“Colour54”时，它可以正常工作。

为什么？我怎样才能做到这一点。

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

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

Answer 1

问题是，因为事件冒泡，函数被调用两次，所以在同一时刻切换类然后再次取消它。

你可以在JavaScript中解决这个问题，但我宁愿建议这个只有CSS的解决方案：

＆＃13;

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

＆＃13;

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

＆＃13;

虽然存在一个小的差别，因为该解决方案只是标签，而不是li。所以这是您的版本中的修复：

＆＃13;

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

＆＃13;

input[type="checkbox"] {
    display: none;
}

.active{
    color:red;
}

＆＃13;

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

＆＃13;

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

Answer 2

您的目标是错误的元素。在你的第一个小提琴中，如果你点击子弹它就可以了。

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

我将您的jQuery代码更改为：

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

Answer 3

之所以会发生这种情况，是因为标签上的点击事件会冒泡到列表项，还会附加到您的复选框输入中。这会触发您的功能两次，从而立即来回切换。您真的需要<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/

切换li。活动类

3 个答案: