jQuery - отображать DIV при наведении, когда родительский класс DIV используется несколько раз

Question

Не уверен, как решить эту проблему - я использую jQuery, чтобы показать div, когда наведен другой div, однако я использую один и тот же класс div на странице несколько раз.

Вот мой код:

$(".map-item, .map-item-trail").live("mouseenter", function() {
 $(".mapitem-smalldescription").fadeIn("normal", function() {  
  });
});

Класс "map-item" и "map-item-trail" используется много раз, поэтому при наведении курсора на одну из них отображается всплывающий элемент div на ВСЕХ из них. Как я могу изменить код так, чтобы всплывающее окно появлялось только на элементе, над которым был установлен курсор.

Спасибо Zach

Answer 1

Только исчезают в элементах, которые можно найти в элементе, над которым наведен курсор.

$(".map-item, .map-item-trail").live("mouseenter", function() {
  $(this).find(".mapitem-smalldescription").fadeIn("normal", function() {  
  });
});

Answer 2

Не видя html-разметку, сложно дать конкретный совет, но если предположить, что третий .mapitem-smalldescription относится к третьему .map-item или .map-item-trail, этот должен работать:

$(".map-item, .map-item-trail").live("mouseenter", function() {
    var itemIndex = $(this).index();
    $(".mapitem-smalldescription:eq(" + itemIndex + ")").fadeIn("normal", function() {  
  });
});

Answer 3

Вы можете определить один и тот же идентификатор для каждой пары элементов и сделать что-то вроде:

$(".map-item, .map-item-trail").live("mouseenter", function() {
 $(".mapitem-smalldescription[mapitem="+this.id+"]").fadeIn("normal", function() {  
  });
});

<div class="map-item" id="1"></div>
<div class="map-item" id="2"></div>
<div class="mapitem-smalldescription" mapitem="1"></div>
<div class="mapitem-smalldescription" mapitem="2"></div>

---

Другое решение состоит в том, чтобы поместить ваш smalldescription div сразу после его элемента div и использовать next ():

$(".map-item, .map-item-trail").live("mouseenter", function() {
 $(this).next().fadeIn("normal", function() {  
  });
});