jQuery .hover只在我的導航欄中的第一個li上工作？

在下面的代碼中，我使用懸停的id =「nav-button」來創建一個console.log，這樣我就可以檢查它是否工作。jQuery .hover只在我的導航欄中的第一個li上工作？

<ul>      <!-- Main Navigation --> 
     <li ><a id="nav-button" href="welcome/about">ABOUT</a></li> 
     <li ><a id="nav-button" href="search-listings">SEARCH LISTINGS</a></li> 
     <li ><a id="nav-button" href="featured">FEATURED</a></li> 
     <li ><a id="nav-button" href="sell-your-home">SELL YOUR HOME</a></li> 
     <li ><a id="nav-button" href="welcome/press">PRESS</a></li> 
     <li ><a id="nav-button" href="welcome/contact">CONTACT</a></li> 
    </ul>

我的JavaScript看起來像這樣：

$(document).ready(function() { 
    $("#nav-button").hover(
     function(){ 
      console.log('done'); 
     }); 
});

出於某種原因，只是我的第一個鏈接響應懸停。其他人不做任何事情。

來源

2013-08-19 Andrew Font

ID必須是在文檔中獨一無二的，你應該改爲使用類。 – tomaroo

第一個鏈接是您唯一選擇的鏈接。如果你選擇了全部，他們都會有懸停事件。 –

這個問題似乎是無關緊要的，因爲它是關於多次不使用ID的一般規則？ – adeneo

不能有超過1個具有相同ID的項目，如果你這樣做，它們不是很獨特。你的HTML更改爲：

<ul>      <!-- Main Navigation --> 
    <li ><a class="nav-button" href="welcome/about">ABOUT</a></li> 
    <li ><a class="nav-button" href="search-listings">SEARCH LISTINGS</a></li> 
    <li ><a class="nav-button" href="featured">FEATURED</a></li> 
    <li ><a class="nav-button" href="sell-your-home">SELL YOUR HOME</a></li> 
    <li ><a class="nav-button" href="welcome/press">PRESS</a></li> 
    <li ><a class="nav-button" href="welcome/contact">CONTACT</a></li> 
</ul>

而且JS：

$(document).ready(function() { 
    $(".nav-button").hover(
     function(){ 
      console.log('done'); 
     }); 
});

這裏有一個小提琴證明它：http://jsfiddle.net/UqyHD/

來源

2013-08-19 21:21:56

HTML：

<ul>      
    <li ><a class="nav-button" href="welcome/about">ABOUT</a></li> 
    <li ><a class="nav-button" href="search-listings">SEARCH LISTINGS</a></li> 
    <li ><a class="nav-button" href="featured">FEATURED</a></li> 
    <li ><a class="nav-button" href="sell-your-home">SELL YOUR HOME</a></li> 
    <li ><a class="nav-button" href="welcome/press">PRESS</a></li> 
    <li ><a class="nav-button" href="welcome/contact">CONTACT</a></li> 
</ul>

的Javascript

$(document).ready(function() { 
    $("a.nav-button").hover(
     function(){ 
      console.log('done'); 
     }); 
});

當您通過ID查找元素時，它將解析DOM，直到找到具有該ID的第一個元素。 $("a.nav-button")將選擇所有具有該類的元素。

來源

2013-08-19 21:25:18

ID應該是唯一的，所以你不能讓id =「nav-button」出現多次。你可以做的是分配的ID的UL標籤像下面

<ul id="nav-buttons">      <!-- Main Navigation --> 
    <li ><a href="welcome/about">ABOUT</a></li> 
    <li ><a href="search-listings">SEARCH LISTINGS</a></li> 
    <li ><a href="featured">FEATURED</a></li> 
    <li ><a href="sell-your-home">SELL YOUR HOME</a></li> 
    <li ><a href="welcome/press">PRESS</a></li> 
    <li ><a href="welcome/contact">CONTACT</a></li> 
</ul>

那麼，你可能是指他們爲「＃NAV-按鈕的」

$(document).ready(function() { 
    $("#nav-buttons a").hover(
     function(){ 
      console.log('done'); 
    }); 
});

來源

2013-08-19 21:41:41

jQuery .hover只在我的導航欄中的第一個li上工作？

回答

相關問題