在 2 个图像 html 和 javascript 之间切换答案

【问题标题】：Switching between 2 images html & javscript在 2 个图像 html 和 javascript 之间切换
【发布时间】：2023-01-22 22:54:13
【问题描述】：

我写了这段代码，当我点击图像上的特定位置时，它会转到下一张图像。到目前为止它正在工作但我希望当我再次点击同一个地方时，上一张图片会再次显示。

这不起作用，我该如何解决？

    <img id="lights-off" src="../images/ABC2.png" style="display: none;">
    <img id="lights-on" src="../images/ABC.png">


    const lightsOff = document.getElementById("lights-off");
    const lightsOn = document.getElementById("lights-on");
    let isChanged = false;
    
    lightsOn.addEventListener("click", function(event){
        if (event.offsetX >= 0 && event.offsetX <= 100 && event.offsetY >= 0 && event.offsetY <= 20) {
            if(!isChanged){
                lightsOff.style.display = "block";
                lightsOn.style.display = "none";
                isChanged = true;
            } else {
                lightsOff.style.display = "none";
                lightsOn.style.display = "block";
                isChanged = false;
            }
        }
    });

我尝试进行一些更改，但没有用

【问题讨论】：

标签： javascript html

【解决方案1】：

你只列出 lightsOn 你应该听两个图像：

const lightsOff = document.getElementById("lights-off");
const lightsOn = document.getElementById("lights-on");


function isInBorder(event){
    return event.offsetX >= 0 && event.offsetX <= 100 && event.offsetY >= 0 && event.offsetY <= 20
}

lightsOn.addEventListener("click", function(event){
    if (isInBorder(event)) {
        lightsOff.style.display = "none";
        lightsOn.style.display = "block";
    }
});

lightsOff.addEventListener("click", function(event){
    if (isInBorder(event)) {
        lightsOff.style.display = "none";
        lightsOn.style.display = "block";
    }
});

【讨论】：