Как сменить src изображения B на изображение A src, когда изображение A нажато с помощью Javascript?

Question

Цель: при щелчке изображения A, то же изображение появляется в нижней части страницы. Нужно работать для нескольких изображений.

При щелчке изображения A мне нужно изображение B, чтобы теперь иметь тот же самый src, что и изображение A. Или создать копию щелкнутого изображения. Это также должно работать для нескольких изображений.

Так, например, если я нажал 5 изображений (Image 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") 
    }); 
}); 

Wh ich работает для замены одного изображения, но мне нужен тот же код для работы с несколькими кликами.

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>

Answer 2

Это поможет вам

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

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

Answer 3

Попробуйте это:

<img src="https://randomuser.me/api/portraits/thumb/men/57.jpg" class="a"> 
<img src="https://randomuser.me/api/portraits/thumb/women/14.jpg" class="a"> 
<img src="https://randomuser.me/api/portraits/thumb/women/7.jpg" class="a"> 
<br> 
<div id="sectionB"> 
    <img src="http://placehold.it/48" class="b"> 
    <img src="http://placehold.it/48" class="b"> 
    <img src="http://placehold.it/48" class="b"> 
</div> 
<br> 
<button id="reset">Reset</button> 

===

$(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'); 
    }) 
}) 

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