ワンクリックで複数の画像を変更する方法

Question

Imは本当に新しいjavascriptです。Im学習中は、ギャラリー内の画像をonclick機能を持つ他の人に変更しようとしています。 私はさまざまなギャラリーへのリンクを持っています。リンク1をクリックすると、imgsはone1.jpg、one2.jpgなどとなります。私は、リンク2をクリックすると、IMGSは、これは私がリンク1のために作られたラフなスクリプトですtwo1.jpg、two2.jpgなど

です：

<script> 
    function one() { 
    document.getElementById("foto1").src="one1.jpg"; 
    document.getElementById("foto2").src="one2.jpg"; 
      } 
</script> 


<a href="#" onclick="one()">Link 1</a> 
<a href="#" onclick="two()">Link 2</a>  
<img id="foto1" src="tre1.jpg"></a> 
<img id="foto2" src="tre2.jpg"></a> 

など

私は別のを作りました同じ内容の2番目のリンクに対してtwo（）という名前の関数を呼び出しますが、srcを必要なものに変更します。私が追加するリンクごとに、スクリプトをコピーして少し変更します。 変数などで1つのスクリプトに最適化する方法があることは知っています。 助けてください？ ありがとう

Answer 1

画像のグループを区別するために、パターンが必要です。 は、そのソースを変更するための画像を区別するために、各imgタグにクラスを追加しようと、スルー画像することができますループは次のように：

<a href="#" onclick="one()">Link 1</a> 
    <a href="#" onclick="two()">Link 2</a>  
    <img class="img1" id="foto1" src="foto1.jpg"> 
    <img class="img1" id="foto2" src="foto1.jpg"> 

    <img class="img2" id="foto3" src="pic1.jpg"> 
    <img class="img2" id="foto4" src="pic2.jpg"> 
    <script> 
    function one() { 
     var img = document.getElementsByClassName("img1"); 
     for (var i in img) { 
      img[i].src = "foto" + 1 + ".jpg" 
     } 
    } 

    function two() { 
     var img = document.getElementsByClassName("img2"); 
     for (var i in img) { 
      img[i].src = "pic" + 1 + ".jpg" 
     } 
    } 
    </script>