HTML画像をクリックする方法onClick

画像1をクリックすると画像2に、画像2をクリックすると画像3に、画像3をクリックすると画像1に変わるようにします。


<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"

    }
0
ru de
画像のパスを array に保持し、クリックするたびに array を実行するほうがよいでしょうか。
追加された 著者 NewToJS,
@Teemuサイクルをより動的にするには、 imagePaths [++ pointer%imagePaths.length] を使用したほうが良いでしょう。インデックス
追加された 著者 NewToJS,
イメージパスを配列に格納し、関数の外側のスコープにポインタを作成します。それから、関数内でポインタを使用して配列からパスを読み取ります。現在のコードの問題は、src属性にイメージへのフルパスが含まれている可能性があり、相対パスを比較していることです。
追加された 著者 Teemu,
@NewToJS絶対に、私はそれを変更しようとしていました、しかし編集時間を使い果たしました。
追加された 著者 Teemu,

4 答え

私の意見では清潔で最適な解決策。ユーザーが前に言ったように。イメージパスを保持するために配列を使用するのは良いことです。

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];
});

解決策

1
追加された

Hi this is different approach.
new ClickListener() is the class used to handle your logic & dom logic

<!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>
0
追加された

コードに多くの構文エラーがありました。私はあなたがあなたの基本的な論理が正しかったことをあなたが見ることができるここでcodepenでそれらを片付けました。ただし、他のユーザーが指摘したように、この問題を解決するためのよりエレガントな方法があります。

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

HTML:




JS:

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"

    }
}
0
追加された

クリックするたびに値を増やしてimgを更新できます。増分値に基づく

 

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

    </script>
0
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript