javascript - 多 ID jQuery 选择器返回不同于单个 ID 选择器

Question

所以我有一些下拉菜单，我最初设置这些菜单是为了确定选择了哪个下拉菜单然后加载元素，没问题。

现在我添加了一组新的下拉菜单，我现有的功能现在也适用于这个，因为它非常广泛

$(document).on('click', '.dropdown-menu li a', function () {...}

现在我在模式中的 4 个不同选项卡上有这些下拉菜单，我只希望最后一个选项卡的功能与其他三个选项卡不同，所以我想制作一个适用于原始 3 个选项卡和一个适用于第 4 类型的功能选项卡。

前三个标签 IDS

#racksTab
#condenserTab
#glycolTab

第四个选项卡(不同) #alertTab

所以我的问题是，当我的选择器使用多个 ID 而不是仅使用 1 个时，为什么我会得到不同的结果

$(document).on('click', '#racksTab,#condenserTab,#glycolTab .dropdown-menu li a', function () {...}

这个函数给了我

但是如果我让选择器只使用一个id，它会得到我想要的子节点

$(document).on('click', '#racksTab .dropdown-menu li a', function () {...}

Answer 1

因为有了这个选择器:

#racksTab,#condenserTab,#glycolTab .dropdown-menu li a

您的目标是三个元素:

1. ID 为 racksTab 的元素

2. ID 为 condenserTab 的元素

3. a里面的元素li .dropdown-menu 的 child Id 元素的子元素 glycolTab

我猜你想要所有元素都像第三个，所以你的选择器必须是:

#racksTab .dropdown-menu li a, #condenserTab .dropdown-menu li a, #glycolTab .dropdown-menu li a

---

_{注意:也许您根本不需要那些选择器，我认为您可以使用更合适的选择器来改进您的代码，正如@j08691 在评论中指出的那样，但一切都会基于真实的标记，如果您添加它，我们可以帮助您改进代码。}