JQuery next() function not return class

Question

Я все еще пытаюсь получить функцию next() в jQuery. Я создал функцию парения, при наведении курсора на изображение, прозрачная накладка появляется на изображение

Click here for an example

По какой-то причине мой next() не работает, я предполагаю, что мой JQuery настроены неправильно. Ниже приведен фрагмент моего кода:

$(document).ready(function() { 
    var $this = $(this); 
    $('.dummy').removeClass('overlay2'); 
    $this.parent().next('.dummy').addClass('overlay2'); 
}); 
}); 

Может ли кто-то исправить, где я поступил не так?

Answer 1

Это может быть легко выполнено без использования JavaScript:

.dummy { 
    height: 100%; 
    width: 100%; 
    position: absolute; 
    top:0; 
    background: #000; 
    opacity: 0.50; 
    display: none; 
} 

.figure-item:hover .dummy{ 
    display: block; 
} 

Я только что изменил .overlay2 к .dummy в таблице стилей и добавил display: none;, а затем сделал это так парит над .figure-item множеств .dummy к display: block;.

Здесь работает: http://jsfiddle.net/zaX5U/6/

---

Старый JS Решение:

Это должно работать для вас:

$(document).ready(function() { 
    $('.figure-img').on('mouseenter mouseleave', function(e){ 
     var $this = $(this), 
      toggle = e.type === 'mouseenter'; 
     $('.dummy').removeClass('overlay2'); 
     $this.find('.dummy').toggleClass('overlay2', toggle); 
    }); 
}); 

причину, по которой предыдущий код не работал был потому что похоже, что вы забыли включить строку с обработчиком событий (был непревзойденный }): в скрипке). Это означало, что $(this) был фактически document, поэтому код не работал.

.hover() interally maps to .on("mouseenter mouseleave", и в этом случае код становится меньше, чтобы использовать полную версию. Это также использует функцию .toggleClass() с необязательным аргументом switch для удаления или добавления класса в зависимости от типа события.

Fiddle: http://jsfiddle.net/zaX5U/4/