在第一次单击后来回更改图像src

Change image src back and forth after first click

本文关键字：图像 src 第一次 单击 后来      更新时间：2023-09-26

我想要的是…当点击图像"x"时，我希望它改变图像，然后当再次点击时，我想要它变回原来的图像，依此类推，第四次，但我只希望在第二次点击时发生。

所以X被点击&什么都没发生，
然后，当再次点击它时，它改变图像，然后在另一次点击后返回，然后在那之后来回交替，直到页面重置，然后我希望它也重置。

到目前为止，这是我的代码：

document.getElementById('x').onclick = function() {
    var ClickedOnce = 0;
    if (this.src == 'Media/Images/Other/SwitchUP.jpg') {
    ClickedOnce + 1
}
if (this.src == 'Media/Images/Other/SwitchUP.jpg' && ClickedOnce > 1) {
    this.src = 'Media/Images/Other/SwitchDOWN.jpg';
} else if ('Media/Images/Other/SwitchDOWN.jpg') {
    this.src = 'Media/Images/Other/SwitchUP.jpg';
}
}

看起来这不起作用的原因是因为您在函数内部声明了var ClickedOnce。这意味着它是该函数中的一个局部变量，每次调用该函数时都会将其设置为0。因此，每次单击它都会发生同样的事情。

尝试在函数之外声明一些变量。

你可以试试这样的东西：

var wasClicked = false;
document.getElementById('x').onclick = function() {
    if (!wasClicked) {
        wasClicked = true;
        return;
    }
    if (this.getAttribute("src") == 'Media/Images/Other/SwitchUP.jpg') {
        this.setAttribute("src", 'Media/Images/Other/SwitchDOWN.jpg');
    } else {
        this.setAttribute("src", 'Media/Images/Other/SwitchUP.jpg');
    }
}

此外，由于您用jQuery标记了这个问题，这里有一个jQuery方法：

var wasClicked = false;
$(document).ready(function() {
    $("#x").click(function() {
        if (!wasClicked) {
            wasClicked = true;
            return;
        }
        if ($(this).attr("src") == "path/to/some/image") {
            $(this).attr("src", "path/to/other/image");
        } else {
            $(this).attr("src", "path/to/some/image");
        }
    });
});
相关文章：