JQuery влияет на элементы с тем же классом, что и элементы, по которым щелкнули или навесили - PullRequest
Новая
       27

JQuery влияет на элементы с тем же классом, что и элементы, по которым щелкнули или навесили

2 голосов
/ 06 января 2012

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

Вот что у меня получилось: 

$(document).ready(function() {
    $("area.THECLASS").hover(function() {
         $("img.THECLASS").fadeIn(200);
    }, function() {
         $("img.THECLASS:not(.stay)").fadeOut(200);
    );
});

У меня будет много частей и классов, и мне нужно, чтобы он работал так, чтобы он мог распознавать img того же класса, что и область наведения, и затемнять его.

Есть ли способ сделать это?

Ответы [ 2 ]

6 голосов
/ 06 января 2012

Вы можете получить классы, назначенные элементу, используя свойство className, однако, поскольку элемент может иметь несколько классов, есть вероятность неоднозначности, мешающей вам знать, какой класс использовать.

Однако,если вы можете гарантировать присутствие только одного класса, сделайте следующее: 

$('area').hover(function () {
    var theClass = $(this).prop('className');

    $('img.' + theClass).fadeIn(200);
}, function () {
    var theClass = $(this).prop('className');

    $('img.' + theClass + ':not(.stay)').fadeOut(200);
});

Если существует несколько классов, вы можете рассмотреть возможность использования атрибута data-* HTML; 

<area data-target="THECLASS" />

и затем в вашем коде; 

$('area').hover(function () {
    var theClass = $(this).data('target');

    $('img.' + theClass).fadeIn(200);
}, function () {
    var theClass = $(this).data('target');

    $('img.' + theClass + ':not(.stay)').fadeOut(200);
});

Для получения дополнительной информации см. Документацию по методам prop() и data().

Кроме того, поскольку вы привязываете к лотам элементов, вы можете исследовать и использовать делегирование событий.Для версии jQuery> = 1,7 см. on(), а для более старых версий см. delegate().

2 голосов
/ 06 января 2012

Попробуйте следующее: 

$("area").hover(function() {
  $.each(this.className.split(/\s+/)), function(index, value) {
    $("img." + value).fadeIn(200);
 }, function() {
  $.each(this.className.split(/\s+/), function(index, value) {
    $("img." + value + ":not(.stay)").fadeOut(200);
  }
);
...