Question

我想要发生的是......当图像＆＃39; x＆＃39;单击我希望它更改图像，然后再次单击它我希望它改回来等等第四，但我只希望这发生在第二次点击。

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

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

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

Answer 1

看起来这不起作用的原因是因为你在函数内部声明了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");
        }
    });
});

首次单击后来回更改图像src

1 个答案: