使用jQuery定位多个元素

我一直在寻找但是空白，我想知道我是否可以使用一个jQuery语句来定位页面上的多个元素。 我在页面上有几个相同的按钮，它们每个都由左，中，右背景组成，中间包含文本，可以扩展到任何必要的大小。 每个都有一个唯一的Id和/或类。 我现在设置它，以便当你将鼠标hover在它们的容器div上时，3个背景会改变，以显示按钮处于不同状态的外观。 它现在完成的方式是对每个按钮进行1次hover调用，该按钮由Class定位（宁可使用ID，但不能有多个具有相同ID的元素）。 这个hover之后是8个事件。 每个右侧和中间的背景更改以及中间文本的颜色更改。

这意味着许多代码行。 我想要的是能够使用hover事件一次调用所有按钮，或者让hover事件以某种方式知道哪个按钮正在hover，并抛出该类或ID，甚至命名回jQuery，然后可以更改左侧和中间的按钮子类。 右侧和中间的子类在所有按钮上是相同的，所以如果hover事件可以集中在任何被称为它的事件上，我只需要一组调用来更改背景属性…当前代码低于两个按钮……

$j(".learnMoreButton").hover( function () { $j('.learnMoreButton .buttonLeft').css({background:"url(/images/concaveBtn-Left2.gif)"}); $j('.learnMoreButton .buttonMiddle').css("background-image", "url(/images/concaveBtn-Middle2.gif)"); $j('.learnMoreButton .buttonMiddle a').css({color:"#ffffff"}); $j('.learnMoreButton .buttonRight').css({background:"url(/images/concaveBtn-Right2.gif)"}); }, function () { $j('.learnMoreButton .buttonLeft').css({background:"url(/images/concaveBtn-Left.gif)"}); $j('.learnMoreButton .buttonMiddle').css("background-image", "url(/images/concaveBtn-Middle.gif)"); $j('.learnMoreButton .buttonMiddle a').css("color", "#666"); $j('.learnMoreButton .buttonRight').css({background:"url(/images/concaveBtn-Right.gif)"}); } ); $j(".bioButton").hover( function () { $j('.bioButton .buttonLeft').css({background:"url(/images/concaveBtn-Left2.gif)"}); $j('.bioButton .buttonMiddle').css("background-image", "url(/images/concaveBtn-Middle2.gif)"); $j('.bioButton .buttonMiddle a').css({color:"#ffffff"}); $j('.bioButton .buttonRight').css({background:"url(/images/concaveBtn-Right2.gif)"}); }, function () { $j('.bioButton .buttonLeft').css({background:"url(/images/concaveBtn-Left.gif)"}); $j('.bioButton .buttonMiddle').css("background-image", "url(/images/concaveBtn-Middle.gif)"); $j('.bioButton .buttonMiddle a').css("color", "#666"); $j('.bioButton .buttonRight').css({background:"url(/images/concaveBtn-Right.gif)"}); } ); 

Answer 1

你可以做：

 $(".learnMoreButton, .bioButton").hover(function() { $(this).find(".buttonRight")... ... }, function() { ... }); 

我想补充一点，我认为你用CSS类做得更好。

 .buttonLeft { background: url(/images/concaveBtn-Left.gif) } .buttonMiddle { background-image: url(/images/concaveBtn-Middle.gif) } .buttonMiddle a { color: #666; } .buttonRight { url(/images/concaveBtn-Right.gif) } .hoverover .buttonLeft { url(/images/concaveBtn-Left2.gif) } .hoverover .buttonMiddle { url(/images/concaveBtn-Middle2.gif) } .hoverover .buttonMiddle a { color: #FFF; } .hoverover .buttonRight { background: url(/images/concaveBtn-Right2.gif) } 

和

 $(".learnMoreButton, .bioButton").hover(function() { $(this).addClass("hoverover"); }, function() { $(this).removeClass("hoverover"); }); 

你会得到更少的代码。

你也可以给元素赋予多个类：

 
 ... 
 
 ...  

然后它变得更简单：

 $(".hoverbutton").hover(function() { $(this).addClass("hoverover"); }, function() { $(this).removeClass("hoverover"); }); 

Answer 2

 $j(".learnMoreButton, .bioButton").hover( function () { var $this = $j(this); //this points to DOM element hovered, $j() makes jQuery object out of it. //this syntax tells jQuery to search only inside $this element. $j('.buttonLeft', $this).css({background:"url(/images/concaveBtn-Left2.gif)"}); $j('.buttonMiddle', $this).css("background-image", "url(/images/concaveBtn-Middle2.gif)"); $j('.buttonMiddle a', $this).css({color:"#ffffff"}); $j('.buttonRight', $this).css({background:"url(/images/concaveBtn-Right2.gif)"}); }, function () { var $this = $j(this); $j('.buttonLeft', $this).css({background:"url(/images/concaveBtn-Left.gif)"}); $j('.buttonMiddle', $this).css("background-image", "url(/images/concaveBtn-Middle.gif)"); $j('.buttonMiddle a', $this).css("color", "#666"); $j('.buttonRight', $this).css({background:"url(/images/concaveBtn-Right.gif)"}); } ); 

Answer 3

目前代码如下所示：

 $j(function (){ $j(".hoverBTN").hover( function() { $j(this).addClass("hoveroverL"); $j(this).addClass("hoveroverM"); $j(this).addClass("hoveroverR"); }, function() { $j(this).removeClass("hoveroverL"); $j(this).removeClass("hoveroverM"); $j(this).removeClass("hoveroverR"); }); }); 

哪个有效，但错误的元素。 它当前更改了hover的按钮，但是它向按钮包装器添加了3个类，而不是右上角和中间的子类：按钮的一个示例是：

 
 
 
Timeline
 
  

Answer 4

您可能还想考虑不使用jQuery或Javascript。 CSS应该足够了。 只需为每个按钮指定相同的类，并在CSS中执行以下操作：

 .button .buttonLeft { background: url(/images/concaveBtn-Left.gif) } .button .buttonMiddle { background: url(/images/concaveBtn-Middle.gif); color: #666; } .button .buttonRight { background: url(/images/concaveBtn-Right.gif) } .button:hover .buttonLeft { background: url(/images/concaveBtn-Left2.gif) } .button:hover .buttonMiddle { background: url(/images/concaveBtn-Middle2.gif); color: #ffffff; } .button:hover .buttonRight { background: url(/images/concaveBtn-Right2.gif) } 

但是，有一点需要注意; IE（至少某些版本？）不支持：将鼠标hover在div上。 我解决这个问题的方法是将一个按钮设为 ，并将按钮内部的元素设置为 s。

Answer 5

好的，我有这个工作！ 谢谢Cletus你给了我正确的方向……我必须在这个上使用子选择器，然后选择每个孩子并改变它的个别类……inheritance代码……

 $j(function (){ $j(".hoverBTN").hover( function() { $j(this).children('div:nth-child(1)').addClass("hoveroverL"); $j(this).children('div:nth-child(2)').addClass("hoveroverM"); $j(this).children('div:nth-child(3)').addClass("hoveroverR"); }, function() { $j(this).children('div:nth-child(1)').removeClass("hoveroverL"); $j(this).children('div:nth-child(2)').removeClass("hoveroverM"); $j(this).children('div:nth-child(3)').removeClass("hoveroverR"); }); 

}）;

这样完美地工作。 我想要一些紧凑且易于重复使用的东西，我认为这涵盖了两者。 再次感谢大家……