neues Element erstellen mit einem Knopf effektiv

Question

ich versuche druckbare polaroid Template zu erstellen, aber ich habe ein Problem mit einem Element, habe ich Aufkleber Behälter wie folgt aus:

 <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> 

der Screenshot von sticker container:

, wenn ich das Bild klicken, wird es neues Element in die polaroid-container schaffen, hier:

Mein Problem ist, wie man seine Arbeit macht? Ich habe versucht, diesen Code zu verwenden:

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') 
     }); 
     });` 

aber es zeigt nur ein Bild, das ich auf .append() schreiben, wie diese effektiv zu machen, ohne jquery jedes Bild erstellen?

UPDATE

ganze Seite. Wie Sie mit diesem Code sehen:

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') 
     }); 
     }); 

wird es neues Element erstellen auf polaroid-container genannt sticker-body und es wird innerhalb append() mit Bild kommen. I-Klasse haben sticker seine für sticker image genannt, was ich will, ist, wenn ich sticker class mit ex: image-1 klicken, wird es image-1 zeigen und wenn ihr eine andere sticker class es image-2

zeigen, wie erstelle ich diese effektiver ohne jquery schaffen jede id (* wenn ich ID pro Klasse verwende)? Also sollte ich nicht viel 'append() `Code erstellen. Danke

Answer 1

Wenn ich Ihre Frage richtig verstehe, haben Sie Haufen Aufkleber, die Benutzer aus einem Vorlagenbehälter auswählen und sie zu einem anderen Div hinzufügen können.

Hier ist, was ich getan habe:

1. ich ein neues Objekt gemacht. Du wirst also mit einem komplett neuen Objekt fertig werden.
2. Ich habe es ziehbar gemacht.

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') 
 
    }); 
 
    
 
});