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

这使鼠标悬停在文档中的“any”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属性，该属性存在且可以在其上调用“substring”。但是，按钮图像在直接父div中没有id。实际错误是Uncaught TypeError: Cannot call method 'substring' of undefined，因为它不能在不存在的div id上调用substring。

Jquery脚本与按钮div冲突

2 个答案: