Запуск нескольких сценариев jQuery для текущего активного элемента

Я немного новичок в jQuery, и у меня есть трудности с созданием функции, поэтому я очень надеюсь, что кто-то может мне немного помочь. В основном я хочу выделить 2 элемента одновременно (через toggleClass).

В основном у меня есть повторяющийся div (#post), который содержит заголовок, большой палец и div описания. Что я хотел бы сделать, так это, как только я наведу курсор на заголовок или большой палец, разделив элементы, чтобы получить новый дополнительный класс (xxxHover). Таким образом, в основном, когда пользователь наводит указатель мыши на div title/thumb, div title/thumb (оба они) получают новый класс с именем (xxxHover, где xxx означает имя div — в данном случае titleHover/thumbHover).

Возможно, я не лучший в объяснении, поэтому я также подготовил jsFiddle:

http://jsfiddle.net/yLqnd/12/

Как видите, моя проблема заключается в том, чтобы ограничить сценарии только для текущего элемента (#post в нашем случае). Если это поможет или имеет значение, я должен сказать, что это будет интегрировано в веб-сайт WordPress (поэтому структура HTML в основном находится в loop.php), поэтому я хотел бы ограничить эффект 2-кратного выделения только для каждого элемента (#post) .

Заранее спасибо за любую идею!


javascript jquery element toggleclass
person Adrian    schedule 24.07.2012    source источник
comment
Почему бы вам просто не использовать .post:hover?   -  person Bergi    schedule 24.07.2012
comment
Спасибо, ребята, за быструю помощь. Очень признателен! Я использовал версию Оскара с .parentNode. Все ответы высоко ценятся и спасибо за быструю обратную связь. Некоторые из них действительно хороши и элегантны, но в моем случае они неприменимы, так как я сделал небольшую ошибку (можно сказать) в описании. Эффекты наведения разные (в моем примере оба стали синими, но это был просто пример). В любом случае, ура всем!   -  person Adrian    schedule 24.07.2012

Ответы (4)


arrow_upward
0
arrow_downward

http://jsfiddle.net/oscarj24/yLqnd/13/

person Oscar Jara    schedule 24.07.2012
comment
Спасибо, Оскар! добавление .parentNode после этого помогло! - person Adrian; 24.07.2012

arrow_upward
0
arrow_downward

Вот обновленный jsFiddle: вместо того, чтобы быть таким конкретным, любой элемент div внутри теперь будет переключать класс

ссылка jsFiddle

В общем, я собрал все вместе:

$(".post div").mouseover(function(){  
    $(this).closest('.post').find('div').toggleClass('thumbHover');
}).mouseout(function(){    
    $(this).closest('.post').find('div').toggleClass('thumbHover');
});
person Mark Pieszak - Trilon.io    schedule 24.07.2012

arrow_upward
0
arrow_downward

Я думаю, вы можете получить нужный эффект, используя .siblings() в jQuery.

$(".title").mouseover(function(){    
    $(this).toggleClass("titleHover");
    $(this).siblings(".thumb").toggleClass("thumbHover");
});

Это ограничит toggleClass только .thumb, который находится в том же .post.

http://api.jquery.com/siblings/

person bohawi    schedule 24.07.2012

arrow_upward
0
arrow_downward

simples, просто сделайте это для родителя обоих элементов:

$(".post").mouseover(function(){  
    $(this).find('div').toggleClass('thumbHover');
}).mouseout(function(){    
    $(this).find('div').toggleClass('thumbHover');
});
person Jamie Hutber    schedule 24.07.2012