如何阻止 jQuery 匹配多个元素

Question

我正在尝试使用 jQUery 创建翻转效果。 我有类似的事情，但是因为我试图对其中有链接的对象进行鼠标悬停，所以我遇到了问题。

我有一个 2 级导航栏。 占位符是表格单元格（我知道不好 - 但它已经这样做了）。 我想将背景从白色 (#FFF) 更改为深灰色 (#999)。 我还想将文本从深灰色更改为白色。

由于文本是一个链接，我必须在链接标记中指定一个类，以确保它是没有下划线的深灰色，并且不会默认为蓝色带下划线的文本。

我编写的代码会导致 class="subLink" 的所有链接在其中任何一个“悬停”时从灰色变为白色。 我只希望这种情况发生在有问题的特定项目上 - 即背景应该变成灰色，链接应该变成白色。

HTML 和 jQuery 如下：-

<td class="subMenuTD"><a href="newsletter.html" class="subLink">Newsletter</a></td>
<td class="subMenuTD"><a href="news_archive.html" class="subLink">News Archive</a></td>
<td class="subMenuTD"><a href="events.html">Events</a></td>

---

$(".subMenuTD").hover(
                  function() { 
                     $(this).addClass("subMenuTDActive");
                     $(".subLink").addClass("subLink-white");
                  },
                  function() {      
                     $(this).removeClass("subMenuTDActive");
                     $(".subLink").removeClass("subLink-white");
          }
               );

Answer 1

将上下文参数添加到 $() 函数。

$(".subLink") --> $(".subLink", this) 将使 jQuery 只匹配给定上下文元素的子元素“.subLink”。

Answer 2

您可以通过不将类添加到链接来使此操作变得更加简单，因为您已经将类添加到父 td，因此可以使用 CSS 来定位链接：

Code before

$(".subMenuTD").hover(                       
  function() {
     $(this).addClass("subMenuTDActive");                                
     $(".subLink").addClass("subLink-white");
  },
  function() {
     $(this).removeClass("subMenuTDActive");                                
     $(".subLink").removeClass("subLink-white");
  }
);

Code

$(".subMenuTD").hover(                       
  function() {
     $(this).addClass("subMenuTDActive");     
  },
  function() {
     $(this).removeClass("subMenuTDActive");    
  }
);

新 CSS 规则

.subMenuTDActive .subLink {
   /* Add hover link styling here */
}

这将起作用，因为“.subMenuTDActive .subLink”比“.subLink”具有更高的特异性，因此将覆盖“.subLink”规则。

Answer 3

我和Drthomas在一起。 当你可以只使用 css 时，你到底为什么要使用 javascript 呢？

 .subMenuTD:hover {
                   background-color: #ccc;
                   }

 .subLink:hover {
                 color: #fff;
                 }

甚至更好（我认为），摆脱您不应该拥有且应该删除的 td 元素的样式，将链接设置为 display:block，然后您可以在一个元素下声明悬停样式：

 .subLink {
          display: block;
          }

  .subLink:hover {
                 background-color: #ccc;
                 color: #fff;
                 }

或者 除非您无法控制 html，或者您有一些关键任务依赖于标记保持不变，否则“它已经在使用表格，我知道，起诉我”是一个非常糟糕的借口。 这是你的子菜单，没有表格：

<ul class="subMenu">
<li><a href="newsletter.html">Newsletter</a></li>
<li><a href="news_archive.html">News Archive</a></li>
<li><a href="events.html">Events</a></li>
</ul>

大约花了 30 秒。 现在这是导航栏/滚动条的 CSS：

 .subMenu li {
          display: inline;
          list-style: none;
          }

  .subMenu a {
          color: #000;
          background-color: #fff;
          text-decoration: none;
          display: block;
          }

   .subMenu a:hover {
          color: #fff;
          background-color: #ccc;
          }

这可能又花了一分钟，因为我必须让它看起来很漂亮。

我并不是想欺负你或贬低你，但非语义代码不应该被鼓励，如果你正在寻求某事的帮助，我会觉得不合适，因为知道它正在发生在不合规的网站上使用。

Answer 4

您可以使用 AKX 的解决方案，或者：

$(".subMenuTD").hover(
                    function() { 
                            $(this)
                               .addClass("subMenuTDActive")
                               .children(".subLink")
                               .addClass("subLink-white");
                    },
                    function() {            
                            $(this)
                                .removeClass("subMenuTDActive");
                                .children(".subLink")
                                .removeClass("subLink-white");
                    }
            );

Answer 5

AKX的解决方案是正确的。 或者，您可以执行以下操作：

$(this).children(".subLink")