在当前活动元素上触发多个jQuery脚本

Question

我对jQuery有点新，而且在实现一个函数时遇到了困难，所以我真的希望有人能够指导我一点。我基本想要做的是同时突出显示2个元素（通过toggleClass）。

基本上我有一个重复div（#post），它包含标题，缩略图和说明div。我想要做的是一旦我将鼠标悬停在标题或拇指div上以获得新的附加类（xxxHover）。因此，基本上一旦用户将鼠标悬停在标题/拇指div上，标题/拇指div（两者）就会获得一个名为（xxxHover的新类，其中xxx代表div名称 - 在本例中为titleHover/thumbHover）。

我可能没有解释，所以我已经准备了的jsfiddle以及最佳：

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

正如你可以看到我的问题是限制只对当前元素的脚本（#post在我们的例子中）。如果它有帮助或者重要，我不得不说这将被整合到一个WordPress网站中（所以HTML结构基本上在loop.php中），这就是为什么我想限制每个项目（#post）的2x突出显示效果。

非常感谢一个磨坊提前任何想法！

Answer 1

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

Answer 2

这里有一个更新的jsfiddle： 而不是被这么具体，任何div的内部现在切换类

jsFiddle Link

基本上我把它们放在一起：

$(".post div").mouseover(function(){ 
    $(this).closest('.post').find('div').toggleClass('thumbHover'); 
}).mouseout(function(){  
    $(this).closest('.post').find('div').toggleClass('thumbHover'); 
}); 

Answer 3

我想你可以通过在jQuer中使用.siblings（）来获得你要找的效果年。

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

这会将toggleClass限制为仅驻留在相同.post中的.thumb。

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

Answer 4

simples，只是做了两个元素的父：

$(".post").mouseover(function(){ 
    $(this).find('div').toggleClass('thumbHover'); 
}).mouseout(function(){  
    $(this).find('div').toggleClass('thumbHover'); 
});