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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

这将帮助你

＆＃13;

function changeSrc(id){
document.getElementById('footer').src = document.getElementById(id).src;  
}

＆＃13;

<img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg" height="200" width="auto" id="img1" onclick="changeSrc(this.id)"/>
<img src="https://images-eu.ssl-images-amazon.com/images/G/02/uk-electronics/product_content/Nikon/ECS-NK1308141-B00ECGX8FM-2L-1024w683q85s10-BKEH_London_Paris__0316.jpg" height="200" width="auto" id="img2" class="image" onclick="changeSrc(this.id)"/>
<img src="" height="200" width="auto" id="footer" class="image" />

＆＃13;

Answer 3

试试这个：

$(function() {
  $('.a').click(function() {
    var img = $(this).attr('src');
    var index = $(this).index();

    $('.b').eq(index).attr('src', img);
  })

  $('#reset').click(function(){
    $('.b').attr('src', 'http://placehold.it/48');
  })
})

===

eq

DEMO：https://jsfiddle.net/j359yfor/

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

3 个答案: