如何在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");
    }
);

问题是以上只适用于"tabs"div,而工具栏则停止工作.我想我只是让jQuery语法错误,仍然是jQuery的新东西

Answer 1

您可以像逗号一样用逗号分隔多个选择器.如果要像第一个示例中那样重新创建效果,则需要:

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

'#toolbar img'是整个选择器.它说"将此应用于任何具有工具栏ID的父元素中的img标记".例如:

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

#tabs img,是一个完整的其他选择器.

这些与CSS选择器的语法相同,因此有关更多信息的研究.