On hover, find a matching class from a set of divs and assign a class name to a match (jquery/js)

Question

js/jquery newbie here. I'm trying to create in interactive map where some markers are absolutely positioned on a page and when hovered over, their related info pane should appear on the top left part of the screen. Preferably, fade in and fade out on mouse out. I've tried various things but nothing seems to work. here is a simplified markup that should hopefully show what I'm trying to do:

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

some jquery I've been trying to understand. got it from somewhere around here

$(document).ready(function(){

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


});

Answer 1

Just made a Fiddle

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

As you only want to display the related span, it's not necessary to use each().

And just some further information as you mentioned you're new to js/jquery - it's (in this case, not in general) also possible to use this instead of $(this) - var index = $(".links span").index(this); - as both will return the same result. this is the DOM object in the context of the hover() callback function, $(this) a jquery object. To illustrate the difference and the same result, I've just added a console message for both in an adjusted Fiddle.

As reference a nice article about "this" - http://remysharp.com/2007/04/12/jquerys-this-demystified