javascript - Jquery 脚本与按钮 div 冲突

Question

我正在学习 JQuery 并尝试通过图像创建循环文本，但我遇到了按钮 div (containermain) 的问题。示例如下:http://jsfiddle.net/zAZst/7/最后三张图片是按钮，不应该对上面的图片(前三张)有任何影响。如果将鼠标悬停在图像(前三个)上，它会完美运行，但如果将鼠标悬停在按钮(最后三个图像)上，脚本就会损坏并停止工作。您能否帮我修复脚本，以便如果将鼠标悬停在按钮(最后三张图片)上，则不会影响循环文本。谢谢。

Answer 1

我看到你有这些行:

$('img').on('mouseover', function() {
    clearInterval(intervalId);
    displayTitle($(this).parents('div').attr('id').substring(5));
}).on('mouseout', function() {
    currentImg = $(this).parents('div').attr('id').substring(5);
    startLoop();
})

这会使鼠标悬停在文档中的“任何”img 上以停止循环。您可以为循环中的图像添加一个类，例如

class="img_cycle"

然后更改 javascript on() 函数的第一行，插入一个选择器，如下所示:

$('img.img_cycle').on('mouseover', function() {
    clearInterval(intervalId);
    displayTitle($(this).parents('div').attr('id').substring(5));
}).on('mouseout', function() {
    currentImg = $(this).parents('div').attr('id').substring(5);
    startLoop();
})

希望这有帮助:)

编辑:我在函数中输入了一些错误。这是一个 JSFIddle 工作版本:http://jsfiddle.net/zAZst/8/ :)