使用jQuery定位多个元素

时间:2010-01-21 01:37:55

标签: jquery css

我一直在搜索但是空白,我想知道我是否可以使用一个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)"});
        }
    );

5 个答案:

答案 0 :(得分:33)

你可以这样做:

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

答案 1 :(得分:0)

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

答案 2 :(得分:0)

目前代码如下:

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

答案 3 :(得分:0)

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

答案 4 :(得分:0)

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

});

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