在 div javascript HTML 中显示点击的图像

Question

我想把点击的图片显示成div。 HTML:

<img src="image1.jpg" class="image">
<img src="image2.jpg" class="image">
<div>
    <img id="source">
</div>

JS:

$('img.image').click(function(){
    var source= $(this).attr('src');
    document.getElementById("source")=source;
});

此外，图像应随淡入淡出动画效果而变化。

我该怎么做？

提前致谢。

Answer 1

缺少src

$('img.image').click(function(){
  var source= $(this).attr('src');
  document.getElementById("source").src=source; // --- Here
});

Answer 2

您可以尝试使用以下代码。

为要选择的图像提供相同的 class 名称
选择目标图像元素，然后使用 attr 方法设置图像 src。

   $('.imageToBeClicked').click(function(evt){
        $('#source').attr("src", evt.target.src);
    });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <img src="http://placehold.it/120x120&text=image1" class="imageToBeClicked"/>
    <img src="http://placehold.it/120x120&text=image2" class="imageToBeClicked"/>
    <div>
        <img id="source">
    </div>

在 div javascript HTML 中显示点击的图像

Display clicked image in div javascript HTML

html

javascript

image

click

fade