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/ :)

Answer 2

问题在于 mouseover 和 mouseout 事件的选择器适用于按钮图像以及顶部的图像。当您将鼠标悬停在顶部的图像上时，它会在直接父级中查找 div 并提取 id 属性，该属性存在并且可以调用“子字符串”。但是，按钮图像在直接父 div 中没有 id。实际的错误是Uncaught TypeError: Cannot call method 'substring' of undefined，因为它不能在不存在的 div id 上调用子字符串。