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

Question

下面的代码允许我单击一个图像并在下面生成相同的图像。我试图弄清楚下面的代码如何从处理一个 ID 到处理两个 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 来将每个图像设置为可点击以进行克隆。

当调用事件处理程序时，其 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 绑定(bind)到它们:

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/