Question

我正在尝试单击时更改图像：单击图像1时更改为图像2，单击图像2时更改为图像3，单击图像3时图像更改为图像1。

display: inline-block

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

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

Answer 2

您可以在每次点击时增加价值并更新img。以增值为基础

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

   <script language="javascript">
        var counter = 1;
        function changeImage() {
            counter > 3 ? counter = 1 : counter++; 
            document.getElementById("imgClickAndChange").src = "assets/img"+counter+".png";
        }

    </script>

Answer 3

您的代码中有很多语法错误。我在这里的代码库中清理了它们，您可以看到您的基本逻辑是正确的。但是，正如其他用户所指出的那样，还有更多优雅的方法可以解决此问题。

https://codepen.io/anon/pen/MPYgxM

HTML：

function changeImage() {

    if (document.getElementById("imgClickAndChange").src == "https://r1.ilikewallpaper.net/ipad-wallpapers/download/26516/Natural-Grove-Green-Trees-Path-ipad-wallpaper-ilikewallpaper_com.jpg") 
    {
        document.getElementById("imgClickAndChange").src = "https://st2.depositphotos.com/1000438/6182/i/950/depositphotos_61826015-stockafbeelding-cascades-in-nationaal-park-plitvice.jpg";

    }
    else if (document.getElementById("imgClickAndChange").src == "https://st2.depositphotos.com/1000438/6182/i/950/depositphotos_61826015-stockafbeelding-cascades-in-nationaal-park-plitvice.jpg")
    {
        document.getElementById("imgClickAndChange").src = "https://orig00.deviantart.net/6787/f/2016/104/5/6/aria_maleki___natural_view_of_waterfall_by_aria_maleki-d9yytu8.jpg";

    }
    else if(document.getElementById("imgClickAndChange").src == "https://orig00.deviantart.net/6787/f/2016/104/5/6/aria_maleki___natural_view_of_waterfall_by_aria_maleki-d9yytu8.jpg"){
    document.getElementById("imgClickAndChange").src = "https://r1.ilikewallpaper.net/ipad-wallpapers/download/26516/Natural-Grove-Green-Trees-Path-ipad-wallpaper-ilikewallpaper_com.jpg"

    }
}

JS：

drawer: Drawer(
          child: Container(
            color: Colors.transparent,)),

Answer 4

嗨，这是另一种方法。
新的ClickListener（）是用于处理逻辑和dom逻辑的类

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Image click</title>
  </head>
  <body>
    <div id="player">
    </div>

    <script>
      class ClickListener {
        constructor() {
          this.rootElement = document.querySelector( "#player" );
          this.element = document.createElement("img");
          this.rootElement.appendChild(this.element);
          this.images = ['./1.jpg', './2.jpg', './3.jpg']
          this.idx = 0
          this.init()
        }

        init() {
          this.element.src = this.images[this.idx]
          this.element.style.width = `400px`;
          this.element.style.height = `400px`;
          this.element.onclick = this.nextImage.bind(this)
        }

        nextImage() {
          this.idx++;
          if(this.idx >= this.images.length) {
            this.idx = 0;
          }
          this.element.src = this.images[this.idx]
        }

      }
      new ClickListener()
    </script>
  </body>
</html>

HTML如何更改图片onClick

4 个答案: