Javascript 悬停时，从一组div中找到一个匹配的类，并为匹配项指定一个类名（jquery/js）

这里是js/jquery新手。 我试图在交互式地图中创建一些标记绝对位于页面上，当鼠标悬停在上面时，它们的相关信息窗格应该出现在屏幕的左上角。最好在鼠标退出时淡入淡出。我试过各种方法，但似乎都不管用。下面是一个简化的标记，希望它能显示我正在尝试做的事情：

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

一些我一直想理解的jquery。从附近的某个地方弄来的

$(document).ready(function(){

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


});

刚刚做了一个

由于您只想显示相关的span，因此无需使用

each（）

还有一些进一步的信息，正如您所提到的，您是js/jquery新手-也可以使用

this

而不是

$（this）

-

var index=$（“.links span”）.index（this）-因为两者都将返回相同的结果
this
是hover（）回调函数上下文中的DOM对象，
$（this）
是jquery对象。为了说明两者的区别和相同的结果，我刚刚在一个调整后的示例中为两者添加了一条控制台消息

作为参考，一篇关于“这个”的好文章

$(document).ready(function(){

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


});

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