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

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

我花了很长时间才找到照片，对不起ㅋㅋㅋ

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>

Answer 3

您忘记了()：

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

        }

MOAR：https://www.w3schools.com/js/js_if_else.asp

Answer 4

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

       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 5

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，并且还使用了一个=，它将分配一个值，而不是比较值。

如何在单击一个源上更改图像源，并在同一个点击时返回到不同的源

5 个答案: