當用JavaScript單擊圖像A時，如何將圖像B的src更改爲圖像A的src？

目標：單擊圖像A時，相同的圖像出現在頁面的底部。需要爲多個圖像工作。當用JavaScript單擊圖像A時，如何將圖像B的src更改爲圖像A的src？

當單擊圖像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">

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

瓦我工作替換一個圖像，但我需要相同的代碼工作多個圖像點擊。

來源

2016-04-23 AndrewLeonardi

可以請你發佈你嘗試過的一些代碼？ –

添加了一些我試過的代碼:) – AndrewLeonardi

帶有事件監聽器的另一個提議。

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>

來源

2016-04-23 16:50:14

很酷。嗯。我在圖片上使用的ID是「卡片」我需要更改哪些內容才能使其運行？ – AndrewLeonardi

用'card'替換'img'。 –

無法完成它的工作。上面哪些「img」標籤需要更改？ – AndrewLeonardi

這將幫助你

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

來源

2016-04-23 16:21:18

有趣！謝謝！因此，我需要在列中組織生成的圖像，而不是頁腳，因此我需要能夠專門選擇生成的圖像的位置。建議？謝謝！ – AndrewLeonardi

試試這個：

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

來源

2016-04-23 16:34:06

謝謝！這太棒了。由於某些原因，但是當我將其應用於我的代碼時，它僅更新第一個圖像。任何想法爲什麼會這樣？ – AndrewLeonardi

當用JavaScript單擊圖像A時，如何將圖像B的src更改爲圖像A的src？

回答

相關問題