[英]Create new element with one button effectively
i'm trying to create printable polaroid template, but i have a problem with some element, i have sticker container like this : 我正在尝试创建可打印的宝丽来模板,但是某些元素存在问题,我有这样的不干胶标签容器:
<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>
the screenshot of sticker container
: sticker container
的屏幕截图:
when i click the picture it will create new element to the polaroid-container
, here : 当我单击图片时,它将为polaroid-container
创建新元素,在这里:
My problem is, how to make its work ? 我的问题是,如何使其工作? i tried to use this code : 我试图使用此代码:
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')
});
});`
but it will only show one image that i write on .append()
, how to make this effectively without create jquery
each image ? 但是它只会显示我在.append()
上写的一个图像,如何在不创建jquery
每个图像的情况下有效地做到这一点?
UPDATE 更新
full page. 完整页面。 As you can see with this code : 如您所见,此代码:
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')
});
});
it will create new element on polaroid-container
called sticker-body
and it will come with image inside append()
. 它将在polaroid-container
上创建一个名为sticker-body
新元素, append()
在append()
附带图像。 I have class called sticker
its for sticker image
, what i want is when i click sticker class
with ex: image-1
it will show image-1
and if its another sticker class
it will show image-2
我有一个称为sticker
类,用于其sticker image
,我想要的是当我用ex: image-1
单击sticker class
时ex: image-1
它将显示image-1
,如果它的另一个sticker class
将显示image-2
how do i create this more effectively without create jquery each id
(*if i use id per class) ? 如何在不创建每个id
情况下更有效地创建此id
(*如果我按类使用ID)? So i should not create a lot of 'append()` code. 所以我不应该创建很多'append()`代码。 Thanks 谢谢
If I understand your question correctly, you are having bunch of stickers that user can select from a template container and add them to another div. 如果我正确理解了您的问题,则说明您有一堆贴纸,用户可以从模板容器中选择它们并将它们添加到另一个div中。
Here is what I have done: 这是我所做的:
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') }); });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.