jQuery循环元素上的jQuery悬停功能后switchClass失败

Posted 2023-05-08

【中文标题】jQuery循环元素上的jQuery悬停功能后switchClass失败

【英文标题】：switchClass failing after jQuery hover function on jQuery cycle element

【发布时间】：2012-09-16 01:13:40

【问题描述】：

我有一个使用 jQuery 循环插件作为滑动横幅的页面，每张幻灯片内部都有一个 div (#info)，其背景颜色在悬停时会显示动画。

我还尝试使用 switchClass 在页面上的三种配色方案之间进行切换，这也改变了#info 的背景颜色，在悬停在#info 上触发之前效果很好，之后 switchClass 按钮不再工作。

这是悬停的 jQuery：

$('#info.default').hover(function()
        $('#info.default').stop().animate(backgroundColor: '#CDBF21', 300);
        $('#info.default .description').stop().animate(color: '#444', 300);
    , function() 
        $('#info.default').stop().animate(backgroundColor: '#203E52', 300);
        $('#info.default .description').stop().animate(color: '#fff', 300);
    );

这里是 switchClass 部分：

$('.coral-green-button').click(function()
        $('#info.default').stop().switchClass("default", "coral-green", 1000 );
        $('#info.green-blue').stop().switchClass("green-blue", "coral-green", 1000 ); 
    );

$('.green-blue-button').click(function()
        $('#info.coral-green').stop().switchClass("coral-green", "green-blue", 1000 );
        $('#info.default').stop().switchClass("default", "green-blue", 1000);
    );

$('.mustard-blue-button').click(function()
        $('#info.coral-green').stop().switchClass("coral-green", "default", 1000);
        $('#info.green-blue').stop().switchClass("green-blue", "default", 1000);
    );

谢谢！

【问题讨论】：

你可以制作一个 jsfiddle.net 来复制你遇到的问题吗？

当然 - 我在这里设置了它：jsfiddle.net/Q6zsm/6

哪里坏了？抱歉，我不明白发生了什么

好的 - 我已经更新了一点：jsfiddle.net/Q6zsm/7 - 基本上一旦悬停效果触发一次，switchClass 就不再起作用了

另外，你的页面有一堆具有相同 ID 的 dom 元素......这很糟糕

【参考方案1】：

我知道这并不完美，但这是朝着正确方向迈出的一步：

http://jsfiddle.net/Mutmatt/Q6zsm/19/

您的元素（悬停时）正在获得一个新的背景，该背景是一个特定于元素的属性，因此类级别的背景颜色不能覆盖它

更好：

http://jsfiddle.net/Mutmatt/Q6zsm/24/

最佳：

http://jsfiddle.net/Mutmatt/Q6zsm/49/

内嵌评论

【讨论】：

嘿，谢谢！这真的很有帮助。你能解释一下你对有很多具有相同 ID 的 DOM 元素的评论吗？循环中的每张幻灯片都需要唯一的 ID 吗？谢谢！

您的 IDS 需要是唯一的，但您可以添加一个类并在 jquery 中使用 .className 调用该类。我将使用该评论为您修改底部的 jsfiddle...如果答案正确，请不要忘记将答案标记为正确。

请注意，我没有在信息中添加类，我只是将选择器更改为使用“id 开头”选择器