Кнопка наведения контура jquery

Question

хорошо, у меня есть 6 кнопок, я пытаюсь использовать JQuery-слушатель, когда вы наводите курсор на одну из 6 кнопок, это меняет класс.я использую цикл for, чтобы сделать это, вот мой код:

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

каждая кнопка имеет идентификатор "buttonx" (где x - это число)

help?

Answer 1

Вам не нужно перебирать кучу сгенерированных идентификаторов. Вы можете просто дать каждому из них класс 'normal' и:

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

button.normal вернет коллекцию всех кнопок с классом normal, поэтому цикл не нужен, событие hover будет применено ко всем элементам в коллекции.

Answer 2

Обратите внимание, что ответ karim79 - хороший путь.

В вашем коде вы объявляете счетчик цикла как '$ i', но пытаетесь сослаться на 'i'. Это должно быть $ ('# button' + $ i)

Answer 3

Вам не нужно использовать цикл. Просто используйте атрибут start с селектором по идентификатору. Также вы можете захотеть изменить способ применения / удаления классов, чтобы убедиться, что ни один класс не имеет как нормальных, так и парящих типов.

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