Question

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

这意味着许多代码行。我想要的是能够使用悬停事件一次调用所有按钮，或者让悬停事件以某种方式知道哪个按钮正在悬停，并抛出该类或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)"});
        }
    );

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

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

});

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

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

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（至少有些版本？）不支持：将鼠标悬停在div上。我解决这个问题的方法是将一个按钮设为<a>，然后将要设置样式的元素放在按钮内<span>。

Answer 5

好的，我有这个工作！谢谢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");
});

}）;

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

使用jQuery定位多个元素

5 个答案: