Question

我是jQuery的新手，我有一些翻转问题，我试图将相同的“翻转”效果应用于多个div，它似乎工作，唯一的事情是当我滚动一个元素全部我的divs得到同样的效果，当我希望他们在鼠标上一次一个地应用效果时，这是我的代码

  $('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，任何帮助都会很棒，谢谢！

Answer 1

您可以查看$（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');
});

Answer 2

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

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

要查找当前悬停的项目，请在您的活动中使用this关键字，并使用$(this)将其转换为jQuery对象。要查找（邻近）旁边的元素，您将使用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>

JQuery，如何将相同的鼠标悬停效果应用于具有相同类的多个div？请帮忙？

2 个答案: