Multiple item targeting with jQuery

Question

I searched, but came up with an empty one, and I wonder if I can use a single jQuery statement to specify multiple elements on a page. I have several identical buttons on the page, and each of them consists of a left, middle and right background, where the middle contains text and can expand to any desired size. Each of them has a unique identifier and / or class. I have a setting now, so when you hover over your container div, the 3 backgrounds change to make it appear that the buttons are in a different state. The way this is done now is 1 hover call for each button that is in the class (most likely it will use an ID, but you cannot have multiple elements with the same ID). This course is followed by 8 events. Change the background for each right left and middle colors and change the color for text in the middle.

This means a lot of lines of code. I want to be able to call all buttons with a hover event at the same time or have a hover event, somehow know which button is hovering and throw this class or identifier or even a name back into jQuery, which can then change the subclasses of the buttons for left and right average. The subclass for the right and middle levels is identical for all buttons, therefore, if the hover event can be focused on any event called by it, I need only one set of calls to change the background attributes ... The current code is below for two buttons ...

$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

You can do:

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

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

 .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 will have much less code.

You can also give elements several classes to:

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

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

Currently, the code is as follows:

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

What works, but not on those elements. Currently, it modifies a button depending on it, but adds 3 classes to the button shell not to subclasses for Right Left And Middle: Example button:

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

Answer 4

You can also not use jQuery or Javascript for this. CSS should be sufficient. Just give each button the same class and do something similar in your 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) } 

However, there is one caveat; IE (at least some versions?) Doesn't support: hover over a div. The way I get around this is to make the <a> button and put the elements that will be entered inside the button, like <span> s.

Answer 5

Ok, I got this job! Thanks to Cletus for sending me in the right direction ... I had to use the children selector on this, then select each child and change its individual classes ... Here is the code ...

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

});

It works well. I wanted something compact and easy to recycle, and I think it covers both. Thanks again to everyone ...