jquery循环悬停按钮

发布于 2024-08-24 14:53:15 字数 376 浏览 7 评论 0原文

好吧，我有 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 是数字）的

帮助？

原文

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

﹂绝世的画 2024-08-31 14:53:17

请注意，karim79 的答案是一个很好的方法。

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

回复收藏 0 原文

所有深爱都是秘密 2024-08-31 14:53:16

您不需要循环一堆生成的 ID。您可以简单地为每个按钮指定“正常”类，并且：

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

“button.normal”将返回具有“正常”类的所有按钮的集合，因此不需要循环，悬停事件将应用于每个元素在集合中。

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.

回复收藏 0 原文

惜醉颜 2024-08-31 14:53:16

您不应该需要使用循环。只需在 id 上使用属性startsWith选择器即可。此外，您可能想要更改应用/删除类的方式，以确保没有类同时具有正常和悬停。

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

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

回复收藏 0 原文

~没有更多了~