如何處理：單擊圖像時使用Javascript生成的相同圖像

下面的代碼用於製作單擊圖像的一個副本。我需要下面的代碼來處理多個圖像。如何處理：單擊圖像時使用Javascript生成的相同圖像

例如，如果我在屏幕上單擊5個圖像，則會在頁面底部生成相同的5張圖像。用戶應該能夠選擇10張圖像中的5張。有什麼想法嗎？謝謝！

JS：

function changeImage() { 
     var imgSrc = 'http://placehold.it/150'; 

     if (document.getElementById('myImage').src === imgSrc) { 
     document.getElementById('new').src = imgSrc; 
     } 
    }

HTML

<a href="#" onClick="changeImage()"> 
    <img id="myImage" src="http://placehold.it/150"></a> 
<img id="new" src="http://placehold.it/200">

來源

2016-04-24 AndrewLeonardi

您可以使用jQuery clone()功能

$('img').click(function() { 
 
    $('body').append($(this).clone()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img src="http://placehold.it/50x50"> 
 
<img src="http://placehold.it/50x50/000000/ffffff"> 
 
<img src="http://placehold.it/50x50/1C90F3/ffffff"> 
 
<img src="http://placehold.it/50x50/F2BB7C/ffffff">

來源

2016-04-24 17:26:15

你的先生是個天才。我不知道有這樣一個簡單的方法來做到這一點。爲了處理相同的邏輯，我對循環有着複雜的瘋狂。謝謝！！！ – AndrewLeonardi

不客氣。 –

@AndrewLeonardi你也可以先選擇多個圖像放在數組中，然後當你點擊按鈕時，你將它附加到身體https://jsfiddle.net/Lg0wyt9u/595/ –

你可以使用jQuery做

HTML

<a href="#" id="my-image"> 
    <img id="myImage" src="http://placehold.it/150"></a> 
<img id="new" src="http://placehold.it/200" />

$('#my-image').click(function(){ 
    //setting attribute src to be equal as src from #myImage 
    $('#new').attr('src', $('#myImage').attr('src')); 
    //returning false in order to avoid default action 
    return false; 
});

所以這是它:)

只要記住你的HTML之後或進入

$(document).ready(function(){ ..... });

我希望這可以幫助把這個代碼。

來源

2016-04-24 17:23:39

如何處理：單擊圖像時使用Javascript生成的相同圖像

回答

相關問題