在jQuery中单击图像后如何在另一个div中显示图像

Question

I have an image in my webpage i want when the user click on the image the current image also appear in the other div i have in my web page i am totally confuse please help me out here is my code.

<div id="img"><img src="download1.jpg"></div>

<div><img src="" class="img2"></div>

<img src="download1.jpg" alt="" class="imgs" id="the_id" width="180" height="60" />
<script type="text/javascript">
$(document).ready(function() {
  $('.imgs').click(function(){
    var idimg = $(this).attr('id');
    var srcimg = $(this).attr('src');
    alert('ID is: '+ idimg+ '\n SRC: '+ srcimg);
    $(".img2").attr('src',srcimg);
  });
});
</script>

Answer 1

Fiddle

Tried using a fiddle and it works, here is the code which I used.

HTML

<div id="img"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTgAVjAiDPV-oy-o9mvdHEsVoACUKJIuFcn08RJ5kRYINY4oqjPcA"></div>

<div><img src="" class="img2"></div>

<div>click me </div>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTgAVjAiDPV-oy-o9mvdHEsVoACUKJIuFcn08RJ5kRYINY4oqjPcA" alt="" class="imgs" id="the_id" width="180" height="60" />

Jquery

$(document).ready(function() {
  $('.imgs').click(function(){
    var idimg = $(this).attr('id');
    var srcimg = $(this).attr('src');
    alert('ID is: '+ idimg+ '\n SRC: '+ srcimg);
    $(".img2").attr('src',srcimg);
  });
});

Answer 2

您的代码是完美的，可以正常工作，以检查是否正确加载了jquery库，但您的代码中没有看到任何错误。

Answer 3

You can achieve this by setting the destination image's src to the same as the img src in the clicked div. Try:

$('.source-img').on('click', function(){
    var src = $(this).children('img').attr('src');  
    $('#destination').children('img').attr('src', src);
});

Check out this jsFiddle .

If you want the images to not have wrappers, then just change the jQuery targetting and leave out the .children(img) part.

Answer 4

If you're looking for a better method, see this JSFiddle

It uses the clone function

$('.imgs').click(function(){
    $(this).clone().appendTo('#LoadImageHere').attr('id', 'ClonedImage');
});

It means you don't have an image with an empty src attribute lying around, and you can add attributes to the cloned image as you wish (I added an ID in the example).

Answer 5

如果尝试使用此代码或此处的组合进行宽度设置，您将获得非常有趣的结果。“ Plz外观”。Div元素在自身img标签中具有宽度源图像，类“ img2”。图库中的其他图像必须具有相同的ID，例如ID为“ the_id” “并且，如果我们单击任何图片，该图片将显示在div标签的空间中。如何获得弹跳效果图片必须具有相同的大小。我将两个div标签组合在一起，其中冷杉的类为“ img2”，第二个是我的图片分发我的图片，使用此页面上的第一个代码，我会创建一个不错的图片库。尝试一下，这并不难。