jqueryを使用してクリックすると20個以上の画像を交換する方法

Question

フォルダ内のほぼ30枚の画像を設定しています。画像を1つずつクリックするとスワップして消えてしまいます同じ場所にある画像 私はそれが動作するためにJqueryのクリック機能を書いていますが、私のスクリプトは非常に長いので、画像をスワップする処理が遅く、スクリプトを終了すると誰も私がこのコードを簡略化するのを助けることができます。事前に おかげ例えば

$(document).ready(function(){ 
 
    $(".swap").click(function(){ 
 
     $(this).attr("src","./images/picture2.bmp"); 
 
     $(this).click(function(){ 
 
     $(this).attr("src","./images/picture3.png"); 
 
     $(this).click(function(){ 
 
     $(this).attr("src","./images/picture4.bmp"); 
 
\t $(this).click(function(){ 
 
     $(this).attr("src","./images/picture5.bmp"); 
 
     $(this).click(function(){ 
 
     $(this).attr("src","./images/picture6.bmp"); 
 
     $(this).click(function(){ 
 
     $(this).attr("src","./images/picture7.bmp"); 
 
     $(this).click(function(){ 
 
     $(this).attr("src","./images/picture8.bmp"); 
 
     $(this).click(function(){ 
 
     $(this).attr("src","./images/picture9.bmp"); 
 
     $(this).click(function(){ 
 
     $(this).attr("src","./images/picture10.bmp"); 
 
     $(this).click(function(){ 
 
     $(this).attr("src","./images/picture11.bmp"); 
 
\t $(this).click(function(){ 
 
     $(this).attr("src","./images/picture12.bmp"); 
 
\t $(this).click(function(){ 
 
     $(this).attr("src","./images/picture13.bmp"); 
 
\t $(this).click(function(){ 
 
     $(this).attr("src","./images/picture14.bmp"); 
 
\t $(this).click(function(){ 
 
     $(this).attr("src","./images/picture15.bmp"); 
 
\t $(this).click(function(){ 
 
     $(this).attr("src","./images/picture16.bmp"); 
 
\t $(this).click(function(){ 
 
     $(this).attr("src","./images/picture17.bmp"); 
 
\t $(this).click(function(){ 
 
     $(this).attr("src","./images/picture18.bmp"); 
 
\t $(this).click(function(){ 
 
     $(this).attr("src","./images/picture19.bmp"); 
 
\t $(this).click(function(){ 
 
     $(this).attr("src","./images/picture20.bmp"); 
 
\t $(this).click(function(){ 
 
     $(this).attr("src","./images/picture21.bmp"); 
 
\t $(this).click(function(){ 
 
     $(this).attr("src","./images/picture22.bmp"); 
 
\t $(this).click(function(){ 
 
     $(this).attr("src","./images/picture22.bmp"); 
 
\t $(this).click(function(){ 
 
     $(this).attr("src","./images/picture23bmp"); 
 
\t $(this).click(function(){ 
 
     $(this).attr("src","./images/picture24.bmp"); 
 
\t $(this).click(function(){ 
 
     $(this).attr("src","./images/picture25.bmp"); 
 
\t $(this).click(function(){ 
 
     $(this).attr("src","./images/picture26.bmp"); 
 
\t $(this).click(function(){ 
 
     $(this).attr("src","./images/picture27.bmp"); 
 
\t $(this).click(function(){ 
 
     $(this).attr("src","./images/picture28.bmp"); 
 
\t $(this).click(function(){ 
 
     $(this).attr("src","./images/picture29.bmp"); 
 
    }); 
 
    }); 
 
    }); 
 
    }); 
 
    }); 
 
    }); 
 
    }); 
 
    }); 
 
    }); 
 
    }); 
 
    }); 
 
    }); 
 
    }); 
 
    }); 
 
    }); 
 
    }); 
 
    }); 
 
    }); 
 
    }); 
 
    }); 
 
\t }); 
 
\t }); 
 
\t });  
 
\t }); 
 
\t }); 
 
\t }); 
 
    }); 
 
    }); 
 
    }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
<img src="./images/Picture1.bmp" class="swap"> 
 
</div>

Answer 1

：あなたのイメージは、実際にあなたが提供した例のように命名されている場合

var max = 30;  
var current = 1; 
$(document).ready(function(){ 
    $(".swap").click(function(){ 
     current++; 
     $(this).attr("src","./images/picture"+current+".bmp"); 
     if (current == max) current = 0; 
    }); 
}); 

これは動作します。また、テーブル名としてcurrentを使用して、イメージ名をテーブルに格納してフルイメージを更新することもできます。

もちろん、私は30後にpicture1.bmpに戻ってくるはずだと思っています。また、srcを切り替えて戻ってくるだけで確認することもできます。

Answer 2

は、単純に各Ternary operator

$(document).ready(function() { 
 
var c=2; 
 
    $(".swap").click(function() { 
 
    c = c<30 ? c : 2; //allow only less then 30 else reset to 2 
 
    $(this).attr("src", "./images/picture"+(c++)+".bmp"); 
 
    console.log($(this).attr("src")) 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <img src="./images/Picture1.bmp" class="swap"> 
 
</div>