单击时添加图像 - 仅添加一次然后停止

Posted 2023-04-13

【中文标题】单击时添加图像 - 仅添加一次然后停止

【英文标题】：prepend images on click - prepend just once then stop

【发布时间】：2015-03-16 05:11:10

【问题描述】：

$('button').click(function()    
 $('.img-container').prepend('<img src="images/image.jpg">')
);

我有一个单页设计和一个在点击时可见的图库部分。 我通过预先添加 imgs 来做到这一点。在这里你可以看到我如何添加 1 张图片。问题是你点击的次数越多，它创建的元素就越多。

有没有办法让它只创建一次元素？然后以某种方式停止前置。

【参考方案1】：

如果您的处理程序与给定的一样简单，那么您可以使用.one() 注册处理程序，以便事件处理程序只执行一次

$('button').one('click', function()    
 $('.img-container').prepend('<img src="images/image.jpg">')
);

演示：Fiddle

---

另一种选择是检查图像是否存在

$('.img-container').not(':has(.someimage)').prepend('<img class="someimage" src="images/image.jpg">')

演示：Fiddle

【讨论】：

可以顺便把整个图片元素放在前面吗？

我的意思是 html5 图片元素和它里面的整个源代码。谢谢，您的解决方案有效，我会接受您的回答

@ArunPJohny Sir 做得很好。我是 *** 的初学者，受到您的知识技能的启发