JQuery 指令不能只在一个目标上切换类

Question

我今天在我的一个 JQuery 脚本上运行了一个神秘的错误。 我有一个像这样的简单 HTML 页面：

<section id="article" class="col-xs col-md col-lg-10 col-lg-offset-1">
    <nav id="page_menu">
        <ol>
            <li class="page_menu_selected"><a href="#9">Community</a></li>
            <li class="page_menu_unselected"><a href="#42">irc channels</a></li>
            <li class="page_menu_unselected"><a href="#40">mailing lists</a></li>
            <li class="page_menu_unselected"><a href="#38">q&amp;a section</a></li>
        </ol>
    </nav>
    <article class="show" id="9">
    <h3>TITLE:</h3>
        <p>Blablablba 01</p>
    </article>
    <article class="hidden" id="42"></article>
    <article class="hidden" id="40"></article>
    <article class="hidden" id="38">
        <h3>TITLE:</h3>
            <p>BLABLABLABLA 02</p>
    </article>
</section>

和JQuery相关的脚本：

$( document ).ready(function(){
    $( "li.page_menu_unselected" ).click(
        function(){
            $("li.page_menu_selected").toggleClass("page_menu_unselected page_menu_selected")
            $( this ).toggleClass("page_menu_unselected page_menu_selected");
    });
});

乍一看，当我开始测试我的代码时，似乎一切正常，因为我点击了未选择的元素并且类切换正确，即使是选择了类值的那个。

这个具有初始“选定”类值的列表项元素是链接 id 为 9 的列表。

问题是当我点击这个列表元素时，它不会切换回它的初始类，与所有其他列表项不同。

如果我在页面加载后尝试将我粘贴的代码推送到 chrome 控制台并尝试使用它，TADA 它就像一个魅力！

我认为这是一个 DOM 问题，但无法弄清楚它在哪里。

Answer 1

您应该在这里使用delegation，因为您的第一个项目在第一次加载时不会附加点击事件处理程序（它的class - page_menu_selected - 与@987654326 中使用的不同@ 选择器 - page_menu_unselected)。

使用delegation，您将保证将来添加到DOM 中的任何适合jQuery 选择器的元素都将以相同的方式被选中：

$(function () {
    $(document).on('click', 'li.page_menu_unselected', function () {                 
        $('li.page_menu_selected').toggleClass('page_menu_unselected page_menu_selected');
        $(this).toggleClass('page_menu_unselected page_menu_selected');
    });
});

Demo

jQuery .on() - Direct and delegated events

Answer 2

页面加载时会发生什么，它会立即找到所有li.page_menu_unselected，然后将事件附加到它们。当这些类发生变化时，附加的事件记录器会失败，因为它不再存在。使用delegate() 可以解决这个问题。

$( document ).ready(function(){
    $(document).delegate("li.page_menu_unselected", "click", function(){
        $("li.page_menu_selected").toggleClass("page_menu_unselected page_menu_selected")
        $( this ).toggleClass("page_menu_unselected page_menu_selected");
    });
});