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

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

Вот мой код:

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

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

Спасибо, Зак.


class jquery hover mouseover
person Zach Nicodemous    schedule 13.03.2011    source источник
comment
Есть ли связь один к одному между ними?   -  person David says reinstate Monica    schedule 13.03.2011
comment
Есть ли причина, по которой вы используете живой метод?   -  person Trevor    schedule 13.03.2011
comment
@Trevor Это не лишено смысла, если, например, динамически добавляется HTML.   -  person Peter Olson    schedule 13.03.2011

Ответы (3)


arrow_upward
1
arrow_downward

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

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

arrow_upward
0
arrow_downward

Не видя вашей 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() {  
  });
});
person David says reinstate Monica    schedule 13.03.2011

arrow_upward
-1
arrow_downward

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

$(".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>

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

$(".map-item, .map-item-trail").live("mouseenter", function() {
 $(this).next().fadeIn("normal", function() {  
  });
});
person Benoît    schedule 13.03.2011
comment
Нет, ты не можешь. id должен быть уникальным в документе, иначе это будет недопустимая разметка и приведет к несоответствиям. Также стоит отметить, что id за пределами документа типа документа HTML5 также будет недопустимым. - person David says reinstate Monica; 13.03.2011
comment
@David Идентификатор недействителен вне документа HTML5? Вы имели в виду числовой идентификатор, верно? - person nyuszika7h; 13.03.2011
comment
@Nyuszika: Да, да :) +1 за подвох..! - person David says reinstate Monica; 13.03.2011