如何将单击时的图像源更改为一个源并在同一次单击时返回不同的源

Question

单击按钮时，必须更改图像来源，再次单击时，应将来源更改回前一个。有点像某种动画，只是我用按钮控制它

我尝试过但失败的代码是：

DOCTYPE html>
<html>
    <body>

        <img id="myImage" src="a.png" alt="a" border="0">

        <button type ="button" onclick="change()">Click Me</button>
    </body>

    <script>

        var x = document.getElementById("myImage")

        function change(){

            if x.src="a.png"

            document.getElementById("myImage").src = "b.png"

            else x.src="a.png"

        }
    </script>

</html>

我应该在我的代码中更改什么或者是否有更简单的代码

Answer 1

试试这个：

        var x = document.getElementById("myImage")

        function change(){

            if (x.src == "a.png")
                 x.src = "b.png"
            else 
                 x.src = "a.png"

        }


    </script>

也可以代替 if 语句：

x.src = (x.src == "a.png" ? "b.png" : "a.png");

Answer 2

你忘记了 ():

function change(){
            if (x.src="a.png")
            document.getElementById("myImage").src = "b.png"
            else x.src="a.png"

        }

摩尔：https://www.w3schools.com/js/js_if_else.asp

Answer 3

如果您尝试切换图像，您可以使用如下全局变量：

       var x = 1;

        function change(){
            if (x == 1)
            {
               document.getElementById("myImage").src = "../Images/arrow.png";
               x = 0;
            }
            else 
            {
               document.getElementById("myImage").src="../Images/Add.png";
               x = 1;
            }

        }

Answer 4

Harikrishnan 的方法是一种方法。另一种方法是使用自定义 data-* 属性。

所以你的 HTML 会变成：

<img id="myImage" data-change="b.png" src="a.png" alt="a" border="0">

而您的 Javascript 将是：

function change(){
    var new_src = x.getAttribute('data-change'); // get the new source
    x.setAttribute("data-change", x.src); // set the custom attribute to current source
    x.src = new_src; // set the image source to new source
}

更新

刚刚发现您的解决方案中存在语法错误和拼写错误。

if x.src="a.png"
   document.getElementById("myImage").src = "b.png"
else x.src="a.png"

应该变成

if(x.src == "a.png")
   x.src = "b.png"
else
   x.src="a.png"

您在 if 语句中遗漏了 ()，并且还使用了一个 =，它将分配一个值而不是比较值。

Answer 5

我认为这就是您要锁定的内容：

找了这么久图片，不好意思ㅋㅋㅋ

var imgA = 'http://i.imgur.com/v5o8MW8.jpg'
var imgB = 'http://i.imgur.com/v1Vb6RR.jpg'

var x = document.getElementById("myImage")

function change() {
  x.src = (x.src == imgA ? imgB : imgA);
}

<body>
  <button type="button" onclick="change()">Click Me</button></br>
  <img id="myImage" src="http://i.imgur.com/v5o8MW8.jpg" alt="a" border="0">
</body>

如何将单击时的图像源更改为一个源并在同一次单击时返回不同的源

How to change source of image on click to one source and back to different source on same click

html

javascript

image

function

src