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绑定到它们：

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/

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

2 个答案: