我正在使用一个图像的一个输入（按钮）内的一个形式在我的网站上，并希望交换图像悬停。
下面的代码在一个独立的演示中运行良好。图像交换得很好。
但是...当我将此代码集成到表单代码的其余部分时，它失败了。
我猜这是因为脚本调用了标记名为“input”的“getElementsByTagName（'input '）”。
因此...也许是因为表单包含了其他的“输入”，函数也以其他的输入为目标，并且简单地死亡了？？？？？？
是否有一种方法可以执行相同的函数，并且在不使用'getElementsByTagName（'input'）'的情况下将特定输入作为目标，或者通过某种方式对其进行调整？
任何帮助都将不胜感激。
谢谢你的好意，
麦迪逊
HTML语言
<!DOCTYPE html>
<head>
<title>Image Swap Test</title>
</head>
<body>
<input type="image" src="/images/image1.png" data-alt-image="/images/image2.png" />
<script>
var inputs = document.getElementsByTagName('input');
for (var i = 0, len = inputs.length; i < len; i++) {
input = inputs[i];
input.onmouseover = function(){
this.setAttribute('data-orig-image',this.getAttribute('src'));
this.src = this.getAttribute('data-alt-image');
};
input.onmouseout = function(){
this.src = this.getAttribute('data-orig-image');
};
}
</script>
</body>
</html>
2条答案
按热度按时间xpcnnkqh1#
如果您使用
querySelectorAll，那么您可以使用CSS选择器-这样，您就可以根据需要缩小列表（仅限CSS选择器）。在下面的代码片段中，我对你的代码进行了一些分解，但主要的一点（关于你的问题）是，使用
querySelectorAll，我可以用type缩小input列表。这样，如果在你的上下文中确实存在冲突问题，问题应该得到解决（当然，你可以添加一个class，或者只是为data-alt-image添加“过滤器”）。此外，通过更新迭代器函数（
for...i++-〉inputs.forEach），它可以很好地处理多个输入。第一个
exdqitrt2#
下面是一个jQuery解决方案，简单明了：
第一个