jQuery - 如何在文档上找到相同的 href attr？答案

【问题标题】：jQuery - How can I find the same href attr on document?jQuery - 如何在文档上找到相同的 href attr？
【发布时间】：2015-03-12 01:06:37
【问题描述】：

编辑：删除开发链接！

在底部，您会看到站点地图导航。如果我将导航点悬停在底部，它也应该在我的顶部导航中突出显示（addClass）相同的导航点。你会看到链接是一样的。对于经验。只有六个...

我将mouseHover 上的“href attr.”写入我的变量“aHref”：

$(".psSitemap a").hover(
    function() {
        var aHref = $( this ).attr('href');
        console.log(aHref);

        // addClass 'active' to the comparable Top Navigation Item href is the same!
    }, function() {
        // removeClass 'active' at Top Navigation
    }
);

但是我怎样才能在我的文档中“找到”类似的 ahref.attr？

感谢您的帮助。

【问题讨论】：

很高兴能为您提供帮助，如果可以简化悬停功能，我刚刚更新了问题的答案（您已发布为答案）。关于 Stackoverflow 规则的一点建议 - 您不应该发布其他问题作为答案，但您可以将其添加为原始问题的更新/编辑。当作为答案发布时，其他问题很可能会被标记为“不是答案”并被删除。更多信息可以查看stackoverflow.com/help/deleted-answers

标签： jquery find href document attr

【解决方案1】：

对于var aHref = $( this ).attr('href');，匹配的顶部导航链接是

$(".full-size a[href='" + aHref +  "']")

对于是否可以编写函数以更简单的方式更改悬停站点地图链接上的匹配 topnav 链接的问题 - 可以通过使用 toggleClass() 来减少它，而不是在两个单独的函数中添加和删除类，而不是声明任何变量（尽管这对可读性很有用，但不是必需的）：

$(document).ready(function () {
    $(".psSitemap a").hover(
    function () {
        $(".full-size a[href='" + $(this).attr('href') + "']").toggleClass('comparable');
    });
});

ul {
  list-style-type: none;
}
li {
  display: inline;
}
a {
  color: #000;
}
.comparable {
  background-color: blue;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="full-size">
  <li><a href="first.html">First</a>

  </li>
  <li><a href="second.html">Second</a>

  </li>
  <li><a href="third.html">Third</a>

  </li>
</ul>
<ul class="psSitemap">
  <li><a href="first.html">First</a>

  </li>
  <li><a href="second.html">Second</a>

  </li>
  <li><a href="third.html">Third</a>

  </li>
</ul>

【讨论】：

【解决方案2】：

这可能是一个解决方案：

$( document ).ready(function() {



  $( ".psSitemap a" ).hover(


    function() {

      // add href from hover pos.
      var aHref = $( this ).attr('href');
      // comparable 
      var topNav = $(".full-size a[href='" + aHref +  "']");


      // addClass 'active' to the comparable Top Navigation Item          
      $(topNav).addClass('comparable');



    }, function() {
      var aHref = $( this ).attr('href');
      var topNav = $(".full-size a[href='" + aHref +  "']");

      // removeClass 'active' at Top Navigation
      $(topNav).removeClass('comparable');
    }
  );





});

感谢马蒂亚斯的帮助。它有效，但我认为我可以更轻松地编写它？！你怎么看..？

【讨论】：