javascript - 画像を変更し、JavaScript クリック イベントで元に戻す

Question

次のコードがあります。

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

2 回目のクリック イベントで画像を元に戻すにはどうすればよいですか? 現時点では、機能していません。

Answer 1

changeImage関数を次のように変更します。

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

Answer 2

トグルを使用できます：

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

Answer 3

そのようなクロージャーを使用してそうすることができます：

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。