При наведении найдите подходящий класс из набора div и присвойте имя класса соответствию (jquery/js)

Question

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> 

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 - объект DOM в контексте функции обратного вызова hover(), $(this) объект jquery. Чтобы проиллюстрировать разницу и тот же результат, я только что добавил консольное сообщение для обоих в скорректированном Fiddle.

Как сослаться на хорошую статью об "этом" - http://remysharp.com/2007/04/12/jquerys-this-demystified