javascript - 如何在 jQuery 中使用多个选择器？

Question

我使用以下代码将悬停效果应用于名为工具栏的 div 内的一组图像:

$("#toolbar img").hover(
    function()
    {
        this.src = this.src.replace("_off", "_on");
    },
    function()
    {
        this.src = this.src.replace("_on", "_off");
    }
);

但我也想对名为 tabs 的 div 应用相同的效果，而不重复相同的代码。我不能做一些这样的事情吗:

$("#toolbar, #tabs img").hover(
    function()
    {
        this.src = this.src.replace("_off", "_on");
    },
    function()
    {
        this.src = this.src.replace("_on", "_off");
    }
);

问题是上面的内容仅适用于“选项卡”div，而工具栏停止工作。我想我只是弄错了 jQuery 语法，对 jQuery 来说还是有点陌生​​

Answer 1

您可以像以前一样用逗号分隔多个选择器。如果您想重新创建第一个示例中的效果，则需要:

$("#toolbar img, #tabs img")

'#toolbar img' 是整个选择器。它说“将此应用于具有工具栏 id 的父元素中的任何 img 标签”。例如:

<div id ="toolbar">
   <img .../>
   <img .../>
</div>

#tabs img，是一个完全不同的选择器。

这些与 CSS 选择器的语法相同，因此需要研究更多信息。