更改图像并使用JavaScript单击事件将其更改回

我有以下代码：

window.onload = function () {
'use strict';

var alcohol = document.getElementById('alcohol'); 

var changeImage = function (event) {
    alcohol.src = "image/alcohol3.jpg";
};

var changeBack = function (event) {
    alcohol.src = "image/alcohol.jpg";
};

addHandler(alcohol, "click", changeImage);
// addHandler(alcohol, "mouseout", changeBack);

---

如何通过第二次单击事件更改回图像？目前，它不工作。

将您的

changeImage

功能更改为：

var changeImage = function (event) {
    if (alcohol.src != "image/alcohol3.jpg"){
       alcohol.src = "image/alcohol3.jpg";
    }
    else
    {
       alcohol.src = "image/alcohol.jpg";
    }
};

---

将

changeImage

功能更改为：

var changeImage = function (event) {
    if (alcohol.src != "image/alcohol3.jpg"){
       alcohol.src = "image/alcohol3.jpg";
    }
    else
    {
       alcohol.src = "image/alcohol.jpg";
    }
};

您可以使用切换：

$("#alcohol").toggle(
  changeImage() ,
  changeBack()
);

您可以使用切换：

$("#alcohol").toggle(
  changeImage() ,
  changeBack()
);

---

您可以使用这样的闭包：

var changeImage = function() {
    function a(event) {
        alcohol.src = "image/alcohol3.jpg";
        event.srcElement.onclick = b;
    }
    function b(event) {
        alcohol.src = "image/alcohol.jpg";
        event.srcElement.onclick = a;
    }
    return a;
}
addHandleaddHandler(alcohol, "click", changeImage());

---

首先是分配为处理程序的

a

函数，每次引发事件时，处理程序都在

a

和

b

之间切换。您可以使用这样的闭包：

var changeImage = function() {
    function a(event) {
        alcohol.src = "image/alcohol3.jpg";
        event.srcElement.onclick = b;
    }
    function b(event) {
        alcohol.src = "image/alcohol.jpg";
        event.srcElement.onclick = a;
    }
    return a;
}
addHandleaddHandler(alcohol, "click", changeImage());

首先是分配为处理程序的

a

函数，每次引发事件时，处理程序都在

a

和

b

之间切换