如何处理：单击图像时使用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生成的相同图像

回答

相关问题