javascript - HTML 如何更改单击时的图像

Question

我试图让图像在单击时发生变化:单击图像 1 时，更改为图像 2，单击图像 2 时更改为图像 3，单击图像 3 时更改为图像 1。

<p>
    <img alt="" src="assets/img1.png" 
        style="height: 85px; width: 198px" id="imgClickAndChange" onclick="changeImage()"   />

<script language="javascript">
function changeImage() {

    if (document.getElementById("imgClickAndChange").src == "assets/img1.png") 
    {
        document.getElementById("imgClickAndChange").src = "assets/img2.png";

    }
    else if (document.getElementById("imgClickAndChange").src == "assets/img2.png")
    {
        document.getElementById("imgClickAndChange").src = "assets/img3.png";

    }
    else if(document.getElementById("imgClickAndChange").src == "assets/img3.png"){
    document.getElementById("imgClickAndChange").src = "assets/img1.png"

    }

Answer 1

我认为干净且最佳的解决方案。正如之前网友所说。最好使用数组来保存图像路径。

var images = ["https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350", "https://i2.wp.com/beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg?resize=640%2C426", "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350"]

var imgState = 0;

var imgTag = document.getElementById("imgClickAndChange");

imgTag.addEventListener("click", function (event) {
  imgState = (++imgState % images.length);
  event.target.src = images[imgState];
});

Solution