<img>-tag中的JS函数不会被调用
<img>-tag中的JS函数不会被调用
提问于 2016-11-18 10:28:06
不管我把这个放在哪里，都没用。也就是说，它不能在html文件中工作，在脚本标记中不能工作，在hideShow函数之上不能工作，而不是在它下面。我有一个JS文件和一个html文件。JS文件中有两个函数，第一个很好，但是当我试图调用第二个JS文件时，它就不能工作了，而当我试图直接在img的onclick="“属性中执行相同的代码时，它就工作了。以下是JS文件：
function hideShow(x,y) {
var hide = document.getElementById(x);
var show = document.getElementById(y);
if (!hide.classList.contains("height-zero") && show.classList.contains("height-zero")) {
hide.classList.add("height-zero");
show.classList.remove("height-zero");
} else {
hide.classList.remove("height-zero");
show.classList.add("height-zero");
}
}
function changeSource(x) {
this.src = x;
}我就是这样把它放进img标签里的
<img src="img/label.png" onClick="changeSource('img/label2.png')">注意:我有不止一张图片
回答 3
Stack Overflow用户
回答已采纳
发布于 2016-11-18 10:30:01
您需要将this传递给您的函数：
<img src="img/label.png" onClick="changeSource(this, 'img/label2.png')">
function changeSource(el, x) {
el.src = x;
}Stack Overflow用户
发布于 2016-11-18 10:34:28
@Justinas回答的另一种方法是将this上下文传递给这个函数调用，就像我的评论说的那样：
changeSource.call(this, "img/label2.png")Stack Overflow用户
发布于 2016-11-18 10:34:05
与其他答案不同，如果您将事件分配从内联移动到脚本标记，则可以使用this --现在您的this是window。
如果你有一个以上的图像，你可以给他们一个类，然后
window.onload=function() {
var imgs = document.querySelectorAll(".labelImage");
for (var i=0, n=imgs.length;i<n;i++) {
imgs[i].onclick=function() {
this.src = this.getAttribute("data-src2");
// or possibly this.src = this.src.replace(/label\./,"label2.")
}
}
}使用
<img class="labelImage" src="img/label1.png" data-src2="img/label1x.png" />
<img class="labelImage" src="img/label2.png" data-src2="img/label2x.png" />
<img class="labelImage" src="img/label3.png" data-src2="img/label2x.png" />内联，this也能工作，但是我建议您不要使用内联函数：
<img src="img/label.png" onclick="this.src='img/label2.png'" />页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40674698
复制相关文章
相似问题
腾讯云开发者
