jquery - 使用 jQuery 定位多个元素

Question

我一直在搜索，但一无所获，我想知道是否可以使用一个 jQuery 语句来定位页面上的多个元素。我在一个页面上有几个相同的按钮，它们每个都由左、中、右背景组成，中间包含文本并且可以扩展到任何需要的大小。每个都有一个唯一的 ID 和/或类。我现在已经设置好了，这样当你将鼠标悬停在它们的容器 div 上时，3 个背景会发生变化，使按钮看起来处于不同的状态。它现在完成的方式是对每个按类定位的按钮进行 1 次悬停调用(宁愿使用 ID，但不能有多个具有相同 ID 的元素)。此悬停之后有 8 个事件。每个右左和中间的背景变化以及中间文本的颜色变化。

这意味着很多行代码。我想要的是能够通过悬停事件一次调用所有按钮，或者让悬停事件以某种方式知道悬停在哪个按钮上并将该类或 ID 甚至名称扔回 jQuery，然后可以更改右左和中间的按钮子类。 right left 和 Middle 的子类在所有按钮上都是相同的，所以如果悬停事件可以集中在调用它的任何事件上，我只需要一组调用来更改背景属性......当前代码如下两个按钮的...

$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");
});

你的代码会少很多。

你也可以给元素多个类:

<div class="bioButton hoverbutton">
  ...
</div>
<div class="learnMoreButton hoverbutton">
  ...
</div>

然后它变得更加简单:

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