Question

无论我把它放在哪里，它都行不通。意思是，它不会在html文件中，脚本标签中，而不是在hideShow函数之上，而不是在它之下。我有一个JS文件和一个html文件。 JS文件中有两个函数，第一个工作正常，但是当我尝试调用第二个函数时，它只是不起作用，当我尝试直接在onclick =“”内部执行同一段代码时它运作的img的属性。这是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-tag中的方式

<img src="img/label.png" onClick="changeSource('img/label2.png')">

注意我有多个图像

Answer 1

您需要将this传递给您的函数：

<img src="img/label.png" onClick="changeSource(this, 'img/label2.png')">

function changeSource(el, x) {
    el.src = x;
}

Answer 2

@Justinas的另一个答案是将this上下文传递给此函数调用，就像我的评论所说：

changeSource.call(this, "img/label2.png")

Answer 3

除了其他答案之外，如果您将事件分配从内联移动到脚本代码，则可以使用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'" />

<img/>中的JS函数 - 不会调用标记

3 个答案: