jQuery .hover только работает на первом ли в моей навигационной панели?

Question

В следующем коде я использую id = "nav-button" при наведении, чтобы создать console.log, чтобы я мог проверить, работает ли он.

<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> 

My JavaScript выглядит так:

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

По какой-то причине, только моя первая ссылка реагирует на на парении. Другие ничего не делают.

Answer 1

Не может быть более одного элемента с одинаковым идентификатором, они не очень уникальны, если вы это сделаете. Изменить 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/

Answer 2

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'); 
     }); 
}); 

Когда вы найдете элемент по идентификатору, он будет анализировать DOM, пока не найдет первый элемент с этим идентификатором. $("a.nav-button") выберет все элементы этого класса.

Answer 3

ID должен быть уникальным, поэтому вы не можете иметь id = «nav-button» появляется более одного раза. Что вы могли бы сделать, присваивается идентификатор к улям тегу как ниже

<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> 

тогда, вы можете относитесь их как «СЧ кнопка # A»

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