Question

在无序列表中，li标签可以有一个打开（绿色）或关闭（红色）的类。

<li class="open">
    <div class="field">U8</div>
    <input type="hidden" name="status" id="status" value=1>
    <div class="status">OPEN</div>
</li>
<li class="closed">
    <div class="field">U10</div>
    <input type="hidden" name="status" id="status" value=0>
    <div class="status">CLOSED</div>
</li>

在关闭正文标记之前的文档底部

$(document).ready(function () {
    $("li.open").click(function () {
        $(this).toggleClass("closed");
    });

    $("li.closed").click(function () {
        $(this).toggleClass("open");
    });
});

第一个函数li.open工作正常！第二个li.closed没有做任何事情。 = |我刚刚用javascript和jquery弄湿了脚。所以向我解释我是一个白痴（这部分是真的）我做了什么或做错了什么！

最后，我希望不仅要更改颜色，还要更改隐藏输入的值，并将OPEN更改为CLOSED，反之亦然。

我很不高兴为什么这不起作用。我甚至创建了open0，open1，closed0和closed1类，并将第一个函数用0和第二个函数用1。相同的结果。

感谢帮助/指导/ chiding =）

Answer 1

您正在尝试将事件绑定到绑定时不存在的类。您将单个事件处理程序绑定到第一个LI，将单个事件处理程序绑定到第二个LI。

以下使用委托事件处理程序，附加到不变的祖先元素（在本例中为document）。

通过监听click事件冒泡到祖先，然后应用选择器然后将函数应用于导致的每个匹配元素事件。

$(document).ready(function () {

    $(document).on("click", "li.open", function () {
        $(this).toggleClass("closed");
    });

    $(document).on("click", "li.closed", function () {
        $(this).toggleClass("open");
    });

});

优点是你可以监听尚不存在的元素（或类）上的事件。

假设您不希望执行任何其他代码，可以将其缩短为单个处理程序以切换两个类（如isherwood所述）。

注意：您的原始代码确实很奇怪，因为它可以在项目上设置open和closed。这可能不是你想要的，但我无法做出任何假设：）

我希望你真的想要这样的东西：http://jsfiddle.net/L4t6h8sa/1/

$(function () {

    $(document).on("click", "li.open,li.closed", function () {
        $(this).toggleClass("closed open");
    });
});

Answer 2

TrueBlueAussie是对的，但更简单的解决方案可能是以更一般的方式定位列表项，然后根据当前类更新其他元素。我假设您最初在所有列表项上都有open或closed类。

$(document).on('click', 'ul#myList li', function () {
    $(this).toggleClass('open closed');

    if ($(this).hasClass('open')) {
        $(this).find('.myHiddenInputClass').val('OPEN');
        $(this).find('.myTextDivClass').text('OPEN');
    } else {
        $(this).find('.myHiddenInputClass').val('CLOSED');
        $(this).find('.myTextDivClass').text('CLOSED');
    }
});

Demo

请注意，我通过DOM遍历和类来定位输入和文本div，而不是ID。

jquery toggleclass与不同的类只有第一个函数有效

2 个答案: