使用jQuery定位多个元素 [英] Targeting multiple elements with jQuery

问题描述

我一直在搜索，但已经出现空白，我想知道是否可以使用一个jQuery语句来定位页面上的多个元素。我在一个页面上有几个相同的按钮，它们都由左，中，右背景组成，中间包含文本，可以扩展到任何必要的大小。每个都有一个唯一的Id和/或类。我现在有它的设置，以便当你将鼠标放在他们的容器div 3的背景改变，给出的按钮是在不同的状态的外观。它的做法现在是1悬停调用每个按钮位于Class（宁愿使用ID，但你不能有多个元素与相同的ID）。这个悬停之后是8个事件。左右中间的背景变化和中间文本的颜色变化。

I have been searching but have come up blank and i'm wondering if I can use one jQuery statement to target multiple elements on a page. I have several identical buttons on a page and they are each made up of a left, middle and right background where the middle contains the text and can expand to any size necessary. Each has a unique Id and/or Class. I have it setup now so that when you mouse over their container div the 3 backgrounds change to give the appearance that the buttons are in a different state. The way its done now is with 1 hover call for each button which is located by Class (would rather use ID but you can't have multiple elements with the same ID). This hover is followed by 8 events. A background change for each right left and middle and a color change for the middles text.

这意味着大量的代码行。我想要的是能够使用悬停事件一次调用所有的按钮或让悬浮事件以某种方式知道哪个按钮被悬停在上面，并抛出该类或id，甚至命名回到jQuery，然后可以更改按钮子类的右侧和中间。右侧和中间的子类在所有的按钮是相同的，所以如果hover事件可以集中在任何事件调用它我只需要一组调用来更改背景属性...当前代码下面的两个的按钮...

This means lots of lines of code. What I want is to be able to call all the buttons at once with the hover event or to have the hover event somehow know which button is being hovered over and to throw that class or id or even name back to jQuery which can then change the buttons subclasses for right left and middle. The subclass for right left and Middle are identical on all the buttons so if the hover event could be focused on whatever event called it i'd only need one set of calls to change the background attributes... The current code is below for two of the buttons...

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

推荐答案

您可以：

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

我想补充一点，我认为你最好使用CSS类。

I will add that I think you'd be better off doing that with CSS classes.

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

，您将拥有更少的代码。

and you'll have a lot less code.

也可以给元素多个类，所以：

Also you can give elements multiple classes so:

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

，然后变得更简单：

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

这篇关于使用jQuery定位多个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！