javascript - 当使用 Javascript 单击图像 A 时，如何将图像 B 的 src 更改为图像 A 的 src？

Question

目标:当点击图像 A 时，同一图像会出现在页面底部。需要处理不止一张图片。

单击图像 A 时，我需要图像 B 现在具有与图像 A 相同的 src。 或者生成单击图像的副本。 这应该也适用于多张图片。

例如，如果我在屏幕上单击了 5 张图像(图像 A-01、A-02、A-03、A-04、A-05)....

页面底部应该有那5张图片

我试过了 HTML:

<img id="myImage" src="http://placehold.it/150">
<img id="new" src="http://placehold.it/200">

JS

$(function(){
  $("#myImage").click(function() {
    $("#new").attr("src","http://placehold.it/150")
    });
});

它可以替换一张图片，但我需要相同的代码来处理多次图片点击。

Answer 1

另一个带有事件监听器的提案。

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);
        };
    }
}

<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>