Wie ändere ich die Bildquelle von Bild B in die Bildquelle von Bild A, wenn Bild A mit Javascript angeklickt wird?

Question

Ziel: Wenn auf Bild A geklickt wird, erscheint dasselbe Bild unten auf der Seite. Muss für mehr als ein Bild arbeiten.

Wenn Bild A angeklickt wird, brauche ich Bild B, um jetzt die gleiche Quelle wie Bild A zu haben. Oder um eine Kopie des angeklickten Bildes zu erzeugen. Dies sollte auch für mehrere Bilder arbeiten können.

So zum Beispiel wenn ich klickte 5 Bilder (Bild A-01, A-02, A-03, A-04, A-05) auf dem Bildschirm ....

Am unteren Ende der Seite sollte diese 5 Bilder sein

ich HTML versucht haben:

<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 arbeite, um ein Bild zu ersetzen, aber ich brauche den gleichen Code, um für mehrere Bildklicks zu arbeiten.

Answer 1

Ein anderer Vorschlag mit einem Ereignis-Listener.

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

Dies wird Ihnen helfen

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

Versuchen Sie folgendes:

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