jQuery .hover 仅在我的导航栏中的第一个 li 上工作？ [关闭]答案

【问题标题】：jQuery .hover only working on first li in my nav bar? [closed]jQuery .hover 仅在我的导航栏中的第一个 li 上工作？ [关闭]
【发布时间】：2013-08-21 19:28:39
【问题描述】：

在下面的代码中，我在悬停时使用 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>

我的 JavaScript 看起来像这样：

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

由于某种原因，只有我的第一个链接响应悬停。其他人什么都不做。

【问题讨论】：

ID 在文档中必须是唯一的，您应该改用类。
第一个链接是您唯一选择的链接。如果您改为全部选择它们，它们都会有悬停事件。
这个问题似乎离题了，因为它是关于不多次使用 ID 的一般规则？
该死的我总是得到那个......我会删除这个问题对不起！

标签： javascript jquery zepto

【解决方案1】：

不能有超过 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/

【讨论】：

【解决方案2】：

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-buttons a”

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

【讨论】：

【解决方案3】：

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") 将选择该类的所有元素。

【讨论】：