JQuery指令可以'；t仅在一个目标上切换类

我今天在一个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>

乍一看，当我开始测试我的代码时，当我单击unselected元素并正确切换类时，似乎一切都正常，即使是选择了类值的那个

具有初始“selected”类值的列表项元素是链接id为9的列表

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

如果我尝试在加载页面后在chrome控制台上推送粘贴的代码并尝试使用它，TADA它会像一个魔咒一样工作

---

我认为这是一个DOM问题，但无法确定它在哪里。

发生的事情是当页面加载时，它会立即找到所有

li。页面菜单\u取消选中，然后将事件附加到它们。当这些类更改时，附加的事件记录器将失败，因为它不再存在。使用
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");
    });
});

当页面加载时，它会立即查找所有未选中的
li.page\u menu\u
，然后将事件附加到它们。当这些类更改时，附加的事件记录器将失败，因为它不再存在。使用
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");
    });
});

您应该在此处使用
委托
，因为您的第一个项目在第一次加载时不会附加click事件处理程序（它的
类
-
页面菜单选中的
-与
jQuery
选择器-
页面菜单未选中的
）中使用的不同

使用
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');
    });
});


您应该在此处使用
委托
，因为您的第一个项目在第一次加载时不会附加click事件处理程序（其
类
-
页面菜单所选
-与
jQuery
选择器-
页面菜单所用的不同
）

使用
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');
    });
});


提示：避免ID以数字开头。不建议这样做。您的代码中缺少分号。@MelanciaUK只是一个复制/粘贴问题；-）但是对于你关于带数字的ID的回答，不幸的是，我不得不使用它们，因为页面部分是由Wordpress生成的：使用相同的
脚本
块，你可以循环通过这些元素，并通过在它们前面加上一些
字符串
值来修复它们的
ID
。@MelanciaUK，不，我不能，因为id是由wordpress函数返回的，并且来自一个特定的页面，该页面没有任何文本引用，只有id和/或菜单顺序int值。提示：避免以数字开头。不建议这样做。您的代码中缺少分号。@MelanciaUK只是一个复制/粘贴问题；-）但是对于你关于带数字的ID的回答，不幸的是，我不得不使用它们，因为页面部分是由Wordpress生成的：使用相同的
脚本
块，你可以循环通过这些元素，并通过在它们前面加上一些
字符串
值来修复它们的
ID
。@MelanciaUK，不，我不能，因为id由wordpress函数返回，并且来自没有任何文本引用但有id和/或菜单顺序int值的特定页面。jQuery
delegate
已弃用，请将
on
与jQuery 1.7+一起使用。如果没有正式弃用，delegate（）已被on（）取代方法由于1.7.jQuery
delegate
已被弃用，请将
on
与jQuery 1.7+一起使用。虽然未正式弃用，但delegate（）已被1.7.Arff以来的on（）方法取代。。。我现在觉得自己很傻，因为答案是如此明显和合理。。。这就解释了为什么我的复制/粘贴/操作在再次扫描整个DOM时起作用，而此时第一个项已经具有正确的值。非常感谢你指出我的错误。哦，谢谢关于.on（）委托函数的介绍，我将使用它作为替代。Arff。。。我现在觉得自己很傻，因为答案是如此明显和合理。。。这就解释了为什么我的复制/粘贴/操作在再次扫描整个DOM时起作用，而此时第一个项已经具有正确的值。非常感谢你指出我的错误。哦，谢谢.on（）委托函数，我将使用它作为替代。