Javascript 第一次单击后前后更改图像src

我想发生的是。。。单击图像“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");
        }
    });
});

---

您总是可以使用类似JSFIDLE的东西，它有一个内置的javascript lint，您可以使用它来检查代码的有效性。。。你可以用另一种方法

然后在javascript

函数MyFunction（o）{if（o.src='Media/Images/Other/SwitchUP.jpg'）{o.src='Media/Images/Other/SwitchDOWN.jpg'；}中{o.src='Media/Images/Other/SwitchUP.jpg'；}

使用

getAttribute

检索

src

-属性，

src

-属性将返回完整路径，比较将无法按预期进行。此外：结尾处的

else if

-条件总是返回true。这个问题对我来说似乎有意义..取出

返回否则它将永远不会到达if语句或更改那里的逻辑。整个函数/语句没有意义。
返回是必需的。询问者在第一次点击图像时不想做任何事情。这就是为什么我在if语句中检查它是否已被单击。如果没有，则返回（不做任何操作）。每次之后，wasclick都将为true，它将计算函数的其余部分。另一种方法是，我无法发布，因为在我键入它时它已关闭，第一次单击设置onclick to=切换函数，然后从此开始，切换：可以尝试以下操作：//第一次单击-将单击事件设置为切换文档。getElementById（'x'）。onclick=function（）{this.onclick=toggleImages（）；}//切换函数toggleImages（）{var-up='Media/Images/Other/SwitchUP.jpg'；var-down='Media/Images/Other/SwitchDOWN.jpg'；this.src=（this.src==up）？down:up；}@Steven有意义：）@Steven我觉得有意义，但它不起作用，我找不到一个原因：(