有效地使用一个按钮创建新元素
我试图创建可打印的宝丽来模板，但我有一些元素的问题，我有这样的贴纸容器：
<div class="sticker-container">
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (1).gif"/></div>
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (2).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (3).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (4).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (5).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (6).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (7).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (8).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (9).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (10).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (11).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (12).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (13).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (14).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (15).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (16).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (17).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (18).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (19).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (20).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (21).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (22).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (23).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (24).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (25).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (26).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (27).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (1).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (2).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (3).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (4).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (5).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (6).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (7).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (8).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (9).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (10).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (11).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (12).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (13).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (14).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (15).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (16).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (17).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (18).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (19).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (20).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (21).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (22).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (23).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (24).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (25).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (26).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (27).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (28).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (29).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (30).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (31).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (32).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (33).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (34).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (35).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (36).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (37).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (38).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (39).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (40).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (41).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (42).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (43).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (44).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (45).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (46).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (47).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (48).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (49).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (50).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/1.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/2.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/3.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/4.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/5.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/6.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/7.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/8.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/9.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/10.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/11.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/12.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/13.gif"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/14.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/15.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/16.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/17.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/18.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/19.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/20.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/21.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/22.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/23.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/24.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/25.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/26.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/27.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/28.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/29.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/30.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/31.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/32.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/33.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/34.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/35.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/36.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/37.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/38.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/39.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/40.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/41.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/42.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/43.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/44.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/45.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/46.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/47.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/48.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/49.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/50.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-3/Emoji Face by Waatt (1).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-3/Emoji Face by Waatt (2).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-3/Emoji Face by Waatt (3).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-3/Emoji Face by Waatt (4).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-3/Emoji Face by Waatt (5).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-3/Emoji Face by Waatt (6).png"/></div>
</div>
sticker container的屏幕截图：
当我点击图片时，它会为polaroid-container创建新元素，此处为：
我的问题是，如何使其工作？我试图使用这段代码：
var counter = 0;
$('.sticker').on("click", function() {
$('.cutting-container').append("<div class='sticker-body'><img src='ssts/img/overlay-3/Emoji Face by Waatt (6).png'/></div>");
$('.sticker-body').draggable({
containment: $('.polaroid')
});
});`
但它只显示我在.append()上写的一张图片，如何在不创建jquery每张图片的情况下有效地制作这张图片？
更新
整页。正如您在此代码中看到的那样：
var counter = 0;
$('.sticker').on("click", function() {
$('.cutting-container').append("<div class='sticker-body'><img src='ssts/img/overlay-3/Emoji Face by Waatt (6).png'/></div>");
$('.sticker-body').draggable({
containment: $('.polaroid')
});
});
它将在名为polaroid-container的{{1}}上创建新元素，它将在sticker-body内显示图片。我的append()类名为sticker，我想要的是当我点击sticker image时sticker class它会显示ex: image-1，如果是另一个image-1它会显示sticker class
如何在不创建每个image-2的jquery的情况下更有效地创建它（*如果我每个类使用id）？所以我不应该创建很多＆＃39; append（）`代码。感谢
1 个答案:
答案 0 :(得分：1)
如果我正确理解了您的问题，那么您将拥有大量贴纸，用户可以从模板容器中选择并将其添加到另一个div中。
这就是我所做的：
- 我做了一个新对象。所以你要处理一个完整的新对象。
- 我让它变得可以拖延。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
var counter = 0;
$('.sticker').on("click", function() {
let $sticker = $($(this).html()); // use a cloned object in case you want to eliminate it.
$('.cutting-container').append($sticker);
$sticker.draggable({
containment: $('.polaroid')
});
});
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？