使用 jQuery 定位多个元素

Targeting multiple elements with jQuery

提问by RAC

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.

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

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...

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

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

回答by cletus

You can do:

你可以做：

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

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

我要补充一点，我认为你最好用 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) }

and

和

$(".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>

and then it becomes even simpler:

然后它变得更简单：

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

回答by vava

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

回答by RAC

Currently the code looks like this:

目前代码如下所示：

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

});   

Which works but on the wrong elements. It currently changes the button being hovered over but it adds 3 classes to the buttons wrapper not to the sub classes for Right Left And Middle: An example of the button is:

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

<div id="timelineButton" style="position:relative;" class="hoverBTN" >
    <div class="buttonLeft"></div>
    <div class="buttonMiddle">Timeline</div>
    <div class="buttonRight"></div>
</div>

回答by Jacob

You may also want to consider not using jQuery or Javascript at all for this. CSS should be sufficient. Just give each button the same class and do something like this in your CSS:

您可能还想考虑完全不使用 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)
}

There is one caveat, however; IE (at least some versions?) doesn't support :hover on divs. The way I work around this is by making a button an <a>and place the elements to be styled inside of the button as <span>s.

然而，有一个警告；IE（至少某些版本？）不支持 :hover 在 div 上。我解决这个问题的方法是制作一个按钮 an<a>并将要设置样式的元素放在按钮内作为<span>s。

回答by RAC

Ok I got this working! Thanks Cletus you sent me in the right direction... I had to use the children selector on this, then choose each child and change its individualy classes... Heres the code...

好的，我开始工作了！谢谢 Cletus，你给我发了正确的方向......我不得不在这个上使用孩子选择器，然后选择每个孩子并改变它的个别类......这是代码......

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

});

});

Works perfectly this way. I wanted something compact and easily reuseable and i think this covers both. Thanks again everyone...

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