javascript - 悬停时，从一组 div 中找到匹配的类，并将类名分配给匹配项 (jquery/js)

Question

这里是 js/jquery 新手。 我正在尝试在交互式 map 中创建，其中一些标记绝对位于页面上，并且当鼠标悬停在其上时，它们的相关信息 Pane 应出现在屏幕的左上角。最好在鼠标移开时淡入和淡出。我尝试了各种方法，但似乎没有任何效果。这是一个简化的标记，希望能够显示我正在尝试做的事情:

<div class="body">
  <div class="links">
    <span class="one">1</span>
    <span class="two">2</span>
    <span class="three">3</span>
    <span class="four">4</span>
  </div>
  <div class="panel">  
    <span class="one"> 1</span>
    <span class="two">2</span>
    <span class="three">3</span>
    <span class="four">4</span>
  </div>   
</div>

CSS:

.body .panel span{
  display:block;
  width:100px;
  height:100px;
  background:red;
  margin:10px;
  text-align:center;
  display: none;
  color:white;
}

.links span{
  display: block;
}

.body .panel span.visible{
  display: block;
}

一些我一直试图理解的jquery。从这里附近的某个地方得到的

$(document).ready(function(){

  $(".links span").hover(function() {
      var index =  $(this).index();
      $(".panel span").each(function() {
           $(this).eq(index).toggleClass("visible");
      });
  });


});

Answer 1

刚刚做了一个Fiddle

 $(".links span").hover(function() {
      var index =  $(".links span").index($(this));
      $(".panel span").eq(index).toggleClass("visible"); 
  });

由于您只想显示相关的范围，因此没有必要使用each()。

正如您提到的，您是 js/jquery 的新手，还有一些进一步的信息 - (在本例中，不是一般情况下)也可以使用 this 而不是 $(this ) - var index = $(".links span").index(this); - 因为两者都会返回相同的结果。 this是hover()回调函数上下文中的DOM对象，$(this)是一个jquery对象。为了说明差异和相同的结果，我刚刚在调整后的 Fiddle 中为两者添加了一条控制台消息。 。

作为引用一篇关于“这个”的好文章 - http://remysharp.com/2007/04/12/jquerys-this-demystified