針對多個元素與jQuery

Question

我一直在尋找，但已經空白，我想知道如果我可以使用一個jQuery語句來定位頁面上的多個元素。我在頁面上有幾個相同的按鈕，它們分別由左，中，右背景組成，其中中間包含文本，並可擴展爲任何必需的大小。每個人都有唯一的Id和/或Class。我現在已經設置好了，這樣當你將鼠標移動到它們的容器div上時，3個背景會發生變化，以使按鈕處於不同的狀態。現在完成的方式是用鼠標懸停每個按鈕（按類別定位）（寧願使用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"); 
    }); 

}); 

哪些工作，但在錯誤的e lements。目前，它改變了按鈕被上空盤旋，但它增加了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> s。

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

}）;

這樣完美地工作。我想要一些緊湊且易於重複使用的東西，我認爲這涵蓋了兩者。再次感謝大家......