我一直在搜索但是空白,我想知道我是否可以使用一个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)"});
}
);
答案 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");
});
});
以这种方式完美运作。我想要一些紧凑且易于重复使用的东西,我认为这涵盖了两者。再次感谢大家......