2

我是 jQuery 新手，遇到了一些翻转问题，我正在尝试对多个 div 应用相同的“翻转”效果，它似乎有效，唯一的事情是当我翻转一个元素时，我的所有 div 都得到了同样的效果，当我希望他们在鼠标悬停时一次应用一个效果时，这是我的代码

  $('div.pitem').bind('mouseenter mouseleave', function() {
  $('div.p-tab').toggleClass('pheader-bar-selected');
  });
  $('div.pitem').bind('mouseenter mouseleave', function() {
  $('div.p-fline').toggleClass('pfooter-bar-selected');
  });

我确实意识到我在所有 div 上都有相同的类，但我希望找到一种方法来做到这一点，而不给每个 div 一个唯一的类或 id，任何帮助都会很棒，谢谢！

4

2 回答 2

2

你可以看看 $(this)。

解释于： http ://remysharp.com/2007/04/12/jquerys-this-demystified/

这是我如何用它来给你一个例子

// megalink hover
$("div.megalink").hover(function(){
    $(this).css('background','#e1eefd');
    $(this).css('border-bottom','1px solid #0470B8');
 }, function(){
    $(this).css('background','#ffffff');
    $(this).css('border-bottom','1px solid #EBE7DE');
});
于 2010-09-17T21:57:25.453 回答
0

您当前所做的是在每次悬停时切换由 选择的所有元素上的 CSS 类div.p-tab，这将是具有 CSS 类 p-tab 的任何 DIV。

您要做的只是在 HTML 结构中悬停元素旁边的元素上切换 CSS 类div.pitem。

要查找当前悬停的项目，请在您的事件中使用this关键字，并使用 . 将其转换为 jQuery 对象$(this)。要查找（相邻）旁边的元素，您将使用该siblings函数。您还可以组合两个悬停事件。

$('div.pitem').bind('mouseenter mouseleave', function() { 
    $(this).siblings('div.p-tab').toggleClass('pheader-bar-selected');
    $(this).siblings('div.p-fline').toggleClass('pfooter-bar-selected');
}); 


<div class="grid_3 portfolio-item">
    <div class="p-tab pheader-bar">
        <span class="tfm-drpa">&raquo;</span>
    </div>
    <div class="pitem">
        <a href="#"></a>
    </div>
    <h2 class="pcontent">Consectetuer Adipiscing Elit<span class="ptitlelines">///</span></h2>
    <div class="p-fline pfooter-bar"></div> 
</div>
于 2010-09-17T21:49:33.310 回答