加载图片点击事件答案

【问题标题】：Loading image onclick event加载图片点击事件
【发布时间】：2016-02-21 09:17:29
【问题描述】：

如何在onclick 事件上加载网页上的图像而不重新加载整个页面？

这是我的代码：

&ltstyle type="text/css"&gt
    div{
        border:1px solid red;
        margin-left: 12%;
        width: 20%;
        height: 200px;
        display: inline-block;
    }   
&lt/style&gt
&ltscript type="text/javascript">
    function changepic () {
        
    }
&lt/script&gt
&lthtml&gt
  &ltbody&gt
     &ltdiv onclick="changepic"&gt
     &lt/div&gt
     &ltdiv onclick="changepic"&gt
     &lt/div&gt
  &lt/body&gt
&lt/html&gt

当客户端单击其中一个 div 元素时，我想将图像放置在 div 中。

【问题讨论】：

你把当前的div换成图片了吗？

标签： javascript html jquery events jquery-events

【解决方案1】：

试试这个

function changepic(div) {
	document.getElementById(div).src = "https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png";
}

div{
  border:1px solid red;
  margin-left: 12%;
  width: 20%;
  height: 200px;
  display: inline-block;
}

<div onclick="changepic('div1')">
  <img id="div1" />
</div>
<div onclick="changepic('div2')">
  <img id="div2" />
</div>

【讨论】：

你为什么将img标签的id命名为div？超级混乱
给img标签一个id并将id传递给函数，以便我们可以找到使用document.getElementById()。

【解决方案2】：

这可以使用 requireJS 轻松完成。将 AMD 定义为页面加载器，然后单击按钮调用该模块，该模块将根据需要注入图像 html。

查看这篇文章 Lazy Loading of images

【讨论】：

【解决方案3】：

如果您愿意，您可以使用 jQuery 在 data-img 参数中传递图像。所以你可以在不同的div中传递不同的图像。

HTML

<div class="change" data-img="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png">
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/a0/Circle_-_black_simple.svg" />
</div>

jQuery

$('.change').click(function(){
    var img=$(this).data('img');
    $(this).children('img').attr('src', img);
});

JSFiddle 示例：https://jsfiddle.net/zwf5k3qw/

【讨论】：