Question

我是JS的新手，请帮助我。我有4个图像具有相同的类名和一个隐藏的div，当点击4个图像中的一个时显示。我怎么能把我点击的图片添加到我的div中？我不想为每个图像编写一个函数。我的代码可以吗？

 <a href="#"><img onClick="show()"class="img" src="css/images1/img1.png"></a>
 <a href="#"><img onClick="show()"class="img" src="css/images1/img2.png"></a>
 <a href="#"><img onClick="show()"class="img" src="css/images1/img3.png"></a>
 <a href="#"><img onClick="show()"class="img" src="css/images1/img4.png"></a>
<div class="gallery"></div>
<script>
    function show(){
        var x=document.getElementsByClassName('gallery')[0];
        x.style.display="block";    
        x.innerHTML='<img src=css/images1/img1.jpg>';
    };
</script>

Answer 1

传入单击元素的“src”：

function show(src){
    var x=document.getElementsByClassName('gallery')[0];
    x.style.display="block"; 
    x.innerHTML = '<img src="' + src + '">';
}

然后，您的html <img/>标记将其src传递给show：

<a href="#"><img onClick="show(this.src)"class="img" src="css/images1/img1.png"></a>

修改：如果您必须按类名选择“图库”，请使用原来的getElementsByClassName。

通过纯JS添加图像

1 个答案: