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

每个按钮都有一个id为“buttonx”（其中x是一个数字）。

需要帮忙吗？

- john morris

---

看看你的HTML代码会有帮助。实现所需效果的方法有几种，但具体情况可能存在非常明确简洁的方式。 - John Rasch

你必须是Perl/PHP程序员。在i变量前面不需要加$ :) - ryeguy

Answer 1

您不需要循环遍历一堆生成的ID。您只需将它们每个都赋予类'normal'，然后：

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

'button.normal'会返回所有带有'class="normal"'的按钮集合，因此不需要循环，悬停事件将应用于集合中的每个元素。

- karim79

---

请注意，他可能没有使用 button 标签。他的代码使用的是 button<x> id。 - Gabriele Petrioli

Answer 2

你不需要使用循环。只需在id上使用属性startsWith选择器。此外，您可能希望更改应用/删除类的方式，以确保没有类同时具有normal和hovering。

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

- tvanfosson

Answer 3

请注意karim79的回答是一个不错的选择。

在你的代码中，你将循环计数器声明为'$i'，但尝试引用'i'。应该是$('#button'+$i)。

- Brian Luft