组合多个 jQuery

【问题标题】：Combining Multiple jQuery组合多个 jQuery
【发布时间】：2019-08-09 02:36:57
【问题描述】：

我有以下两个功能做同样的事情，我可以将这两个功能组合成一个功能吗？

$(document).ready(function(){
    $("#nav li").click(function(e) {
        e.preventDefault();
        $("#nav li").removeClass("current_page_item");
        $(this).closest("li").addClass("current_page_item");
    });
    $("#overlay li").click(function(e) {
        e.preventDefault();
        $("#overlay li").removeClass("current_page_item");
        $(this).closest("li").addClass("current_page_item");
    });
});

谢谢，
乔什

【问题讨论】：

为什么不把同一个类添加到两个 ul 然后你可以定位那个类 - 毕竟这就是类名的意思，定位类似元素（或者只是将类添加到 li 并定位它们直接 - 将使您的 jquery 选择器更有效率）

标签： jquery function class

【解决方案1】：

您可以使用一对结合逗号的选择器。将返回两个选择器的匹配元素：

$("#nav li, #overlay li").click(function(e) {
    e.preventDefault();
    $(this).closest('#nav, #overlay').find('li').removeClass("current_page_item");
    $(this).closest("li").addClass("current_page_item");
});

要在单击时取消选择其他元素，请找到与容器 ID（nav 或 overlay）匹配的祖先，并从后代 li 元素中删除 current_page_item 类。

【讨论】：

$(this) 到 $(this).closest('#nav, #overlay').find('li') 应该允许您保持逻辑并补救不变的兄弟姐妹。编辑：最后一个命令上最接近的命令是没有意义的，因为 this is 是一个 li。
这很好用！我尝试用逗号分隔函数上的选择器，但在 this.closest 上错过了它...谢谢！