Question

我在我的网页上有一个图像我希望当用户点击图像时，当前图像也出现在我网页上的其他div中我完全混淆请帮帮我这里是我的代码。

<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

尝试使用小提琴并且它有效，这是我使用的代码。

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

您可以通过将目标图像的src设置为与单击的div中的img src相同来实现此目的。尝试：

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

查看此jsFiddle。

如果您希望图像没有包装器，那么只需更改jQuery目标并省略.children(img)部分。

Answer 4

如果您正在寻找更好的方法，请参阅此JSFiddle

它使用clone function

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

这意味着您没有包含空src属性的图像，并且您可以根据需要向克隆图像添加属性（我在示例中添加了ID）。

Answer 5

如果你尝试宽度这个代码或这里组合，你可以得到非常有趣的结果.Plz看起来“.Div元素有自我img标签宽度源图像，类”img2“。图库中的其他图像必须具有相同的id，就像是id“the_id”。如果我们点击图片显示在div标签的空间中的任何图片。如何获得弹跳效果图片必须具有相同的大小。我制作组合两个div标签，其中第一个有“img2”类，第二个在哪里是我的照片分发我的照片。通过这个页面上的第一个代码，我做了很好的图片库。试试你自己，这并不难。

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

5 个答案: