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

Change an image and change it back with JavaScript click events

本文关键字：回来 图像 事件 JavaScript 使用 单击      更新时间：2023-09-26

我有以下代码:

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";
    }
};

可以使用这样的闭包:

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之间切换。

可以使用toggle:

$("#alcohol").toggle(
  changeImage() ,
  changeBack()
);
相关文章：