jquery loop hover button

Question

ok j'ai 6 boutons, j'essaie d'avoir un écouteur jquery lorsque vous passez la souris sur l'un des 6 boutons, ça change de classe. im en utilisant une boucle pour ce faire, voici mon code:

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

chaque bouton a une carte d'identité de "buttonx" (x étant un nombre)

aide?

Answer 1

Vous ne devriez pas avoir besoin d'utiliser une boucle. Utilisez simplement l'attribut startsWith selector sur l'identifiant. Aussi, vous pouvez vouloir changer la façon dont vous appliquez/supprimez les classes pour vous assurer qu'aucune classe n'a à la fois normal et planant.

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

Answer 2

Vous n'avez pas besoin de boucler sur un tas d'ID générés. Vous pouvez simplement donner à chacun d'entre eux la classe « normale » et:

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

« button.normal » retournera une collection de tous les boutons avec la classe « normale », il n'y a donc pas besoin d'une boucle, le vol stationnaire L'événement sera appliqué à tous les éléments de la collection.

Answer 3

Notez que la réponse de karim79 est une bonne voie à suivre.

Dans votre code, vous déclarez le compteur de boucle comme '$ i' mais essayez de faire référence à 'i'. Il devrait être $ ('# bouton' + $ i)