Условно запустить только одно из двух связанных событий mouseOver в jQuery / JavaScript - PullRequest
Новая
       16

Условно запустить только одно из двух связанных событий mouseOver в jQuery / JavaScript

0 голосов
/ 24 августа 2011

У меня есть карта США, в которой используется плагин jQuery Maphilight ( см. этой демонстрации Maphilight ). Мой код выглядит следующим образом: 

$('.map').maphilight();

Я объединил его с плагином jQuery qTip . У меня есть подсказки qTip, которые показывают, когда пользователь наводит указатель мыши на каждый <area> на карте. Мой код выглядит следующим образом: 

$('area').each(function() {
    $(this).qtip({
        content: $(this).attr('data'),
    });
});

Таким образом, «выделение» и «всплывающая подсказка» происходят, когда пользователь перемещается по каждому <area>.

У меня также есть легенда. Используя демонстрацию Maphilight выше, легенда будет иметь розовый, фиолетовый, зеленый и желтый цвета. Я хочу переместить, например, желтый ключ легенды и выделить все желтые поля.

Для этого я устанавливаю атрибут class для каждого состояния <area> на его фактический цвет. Для каждого цвета легенды <area> я устанавливаю class="color" и myColor равными фактическому цвету. У меня есть следующий JavaScript, который согласно документации Maphilight , имитирует mouseOver на каждом <area>, чтобы активировать выделение. 

<area class="color" myColor="yellow">
$('.color').mouseover(function() {
    $('.' + $(this).attr('myColor')).mouseover();
});

$('.color').mouseout(function(e) {
    $('.' + $(this).attr(myColor)).mouseout();
});

Однако, как вы можете себе представить, также вызывает всплывающую подсказку для каждого состояния этого цвета . Как я могу активировать только одно событие mouseOver, когда два связаны?

Это, должно быть, распространенная проблема jQuery, которая, безусловно, выходит за рамки этого конкретного сценария, но я не уверен, как ее искать. Существует ли обычно в каждом плагине jQuery метод, позволяющий имитировать эффект для одного конкретного выбора (т. Е. $('area#some_id'))?

1 Ответ

1 голос
/ 24 августа 2011

Похоже, что maphilight - это пространство имен своих событий. Итак, вы должны быть в состоянии сделать это: 

$('.' + $(this).attr(myColor)).trigger("mouseover.maphilight");

РЕДАКТИРОВАТЬ: Для информации о событиях в пространстве имен: http://docs.jquery.com/Namespaced_Events

...