单击图像并使用Javascript生成相同的图像

Question

下面的代码允许我单击图像并在下面生成相同的图像。我试图弄清楚下面的代码如何从处理一个ID到处理两个。我需要能够使用独立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 s到设置每个图像可点击进行克隆。

当一个事件处理函数，它this值将是该事件从开始元素：

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

由于元素提供给处理程序，你可以结合setImg及其内嵌功能：

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

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

要建立每个新img要点击，可以绑定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/