画像をクリックしてJavaScriptを使用して同じ画像を生成する

Question

以下のコードでは、画像をクリックして同じ画像を生成することができます。私は、以下のコードが1つのIDを扱うことから2つを処理することにどのように進むことができるかを理解しようとしています。私は、別々のIDをクリックして下の同じ画像を生成できるように、画像のセットを持つことができる必要があります。私はそれが動作するように感じることはできません。

JS：

var imgCount = 5, 
    i; 

for (i = 1; i <= 5; i++) { 
    document.getElementById('img' + i).addEventListener('click', setImg('img' + i), false); 
} 

function setImg(id) { 
    return function() { 
     var img = document.createElement('img'); 
     if (imgCount) { 
      imgCount--; 
      img.src = document.getElementById(id).src; 
      document.getElementById('footer').appendChild(img); 
     }; 
    } 
} 

HTML：

<img id="img1" src="http://lorempixel.com/200/100/city/1" /> 
<img id="img2" src="http://lorempixel.com/200/100/city/2" /> 
<img id="img3" src="http://lorempixel.com/200/100/city/3" /> 
<img id="img4" src="http://lorempixel.com/200/100/city/4" /> 
<img id="img5" src="http://lorempixel.com/200/100/city/5" /> 
<div id="footer"></div> 

Answer 1

あなたが実際にセットアップにクローニングのためのクリッカブルとして各画像をさらにid秒を必要としません。

イベントハンドラが呼び出されると、そのthis値はイベントから開始することを要素になります。

function setImg() { 
    return function() { 
     // ... 
     img.src = this.src; 
     // ... 
    }; 
} 

要素はあなたのためのハンドラに設けられているので、あなたがsetImgとその組み込み機能を組み合わせることができます：セットアップそれぞれの新しいimgへ

document.getElementById('img' + i).addEventListener('click', setImg, false); 
//        note: no calling parenthesis ^^^^^^ 

function setImg() { 
    // ... 
    img.src = this.src; 
    // ... 
} 

がクリック可能であることを、あなたにもそれらにsetImgをバインドすることができます。

function setImg() { 
    // ... 
    img.src = this.src; 
    img.addEventListener('click', setImg, false); 
    // ... 
} 

---

<img id="img1" src="http://lorempixel.com/200/100/city/1" /> 
<img id="img2" src="http://lorempixel.com/200/100/city/2" /> 
<img id="img3" src="http://lorempixel.com/200/100/city/3" /> 
<img id="img4" src="http://lorempixel.com/200/100/city/4" /> 
<img id="img5" src="http://lorempixel.com/200/100/city/5" /> 
<div id="footer"></div> 

var imgCount = 5, 
    i; 

for (i = 1; i <= 5; i++) { 
    document.getElementById('img' + i).addEventListener('click', setImg, false); 
} 

function setImg() { 
    var img = document.createElement('img'); 
    if (imgCount) { 
     imgCount--; 
     img.src = this.src; 
     img.addEventListener('click', setImg, false); 
     document.getElementById('footer').appendChild(img); 
    }; 
} 

https://jsfiddle.net/tdmmxrxp/

Answer 2

例は、以下の画像の2セットを生成し、いずれかのセットをクリックすると、ページの一番下に写真を追加します。

HTML：

<img id="set1Img1" src="http://lorempixel.com/200/100/city/1" /> 
<img id="set1Img2" src="http://lorempixel.com/200/100/city/2" /> 
<img id="set1Img3" src="http://lorempixel.com/200/100/city/3" /> 
<img id="set1Img4" src="http://lorempixel.com/200/100/city/4" /> 
<img id="set1Img5" src="http://lorempixel.com/200/100/city/5" /> 
<br /> 
<img id="set2Img1" src="http://lorempixel.com/200/100/city/6" /> 
<img id="set2Img2" src="http://lorempixel.com/200/100/city/7" /> 
<img id="set2Img3" src="http://lorempixel.com/200/100/city/8" /> 
<img id="set2Img4" src="http://lorempixel.com/200/100/city/9" /> 
<img id="set2Img5" src="http://lorempixel.com/200/100/city/10" /> 

<div id="footer"></div> 

はJavaScript：

var imgCount = 5, 
    setCount = 2, 
    i, j; 

for (i = 1; i <= setCount; i++) { 
    for (j = 1; j <= imgCount; j++) { 
    document.getElementById('set' + i + 'Img' + j).addEventListener('click', setImg('set' + i + 'Img' + j), false); 
    } 
} 

function setImg(id) { 
    return function() { 
     var img = document.createElement('img'); 
     if (imgCount) { 
      imgCount--; 
      img.src = document.getElementById(id).src; 
      document.getElementById('footer').appendChild(img); 
     }; 
    } 
} 

https://jsfiddle.net/b1q4n9pr/