如何在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選擇器的語法相同，因此可以進行更多信息研究。

Answer 2

嘗試$("#toolbar img, #tabs img") 。

Answer 3

應該沒有“ #toolbar img，#tabs”而不是“ #toolbar，#tabs img”嗎？