jquery loop hover button

Question

ok i have 6 buttons, im trying to have a jquery listener for when you hover over one of the 6 buttons, it changes class. im using a for loop to do this, heres my code:

$(document).ready(function() {
for($i=1;$i<7;$i++) {
      $('#button'+i).hover(function() {
        $(this).addClass('hovering');
      }, function() {
        $(this).removeClass('normal');
      });
}  
});

each button has an id of "buttonx" ( the x being a number )

help?

It would help to see your HTML. There are several methods to achieve your desired effect, but there may be a very clear and concise way depending on your situation. — John Rasch
– John Rasch, Commented Mar 11, 2010 at 18:47
You must be a perl/php programmer. You don't need $ in front of the i variables :) — ryeguy
– ryeguy, Commented Mar 11, 2010 at 18:52

karim79 · Accepted Answer · 2010-03-11 18:44:55Z

2

You don't need to loop over a bunch of generated IDs. You can simply give each of them the class 'normal' and:

$("button.normal").hover(function() {
    $(this).addClass("hovering");
}, function() {
    $(this).removeClass("hovering");
});

'button.normal' will return a collection of all buttons with the 'normal' class, so there's no need for a loop, the hover event will be applied to every element in the collection.

answered Mar 11, 2010 at 18:44

karim79

343k67 gold badges420 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gabriele Petrioli Over a year ago

note that he might not be using button tag.. his code is using a button<x> id.

tvanfosson · Accepted Answer · 2010-03-11 18:46:06Z

1

You shouldn't need to use a loop. Just use the attribute startsWith selector on the id. Also you may want to change how you apply/remove the classes to make sure that no class has both normal and hovering.

$('[id^=button]').hover( function() {
     $('[id^=button]').removeClass('hovering');
     $(this).addClass('hovering').removeClass('normal');
},
function() {
     $(this).removeClass('hovering').addClass('normal');
});

answered Mar 11, 2010 at 18:46

tvanfosson

534k102 gold badges703 silver badges801 bronze badges

Comments

Brian Luft · Accepted Answer · 2010-03-11 18:50:35Z

1

Note that karim79's answer is a good way to go.

In your code, you are declaring the loop counter as '$i' but trying to reference 'i'. It should be $('#button'+$i)

answered Mar 11, 2010 at 18:50

Brian Luft

1,1738 silver badges13 bronze badges

Collectives™ on Stack Overflow

jquery loop hover button

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related