jQuery

Question

编辑：删除 dev-link!

在底部您会看到站点地图导航。如果我将导航点悬停在底部，它也应该在我的顶部导航中突出显示（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
    }
);

但是我怎样才能 "find" 与我的文件中的 ahref.attr 相当呢？

感谢您的帮助。

Answer 1

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

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

关于是否可以编写函数以更简单的方式更改悬停站点地图 link 上的匹配顶部导航 link 的问题 - 可以使用 toggleClass() 来减少而不是在两个单独的函数中添加和删除 class 并且不声明任何变量（尽管这对于可读性很有用，但不需要）：

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

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





});

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

jQuery - 如何在文档中找到相同的 href attr？

jQuery - How can I find the same href attr on document?

find

href

document

attr