I'm making a site where you can build a burger using images in the site. The images are stored in separate divs and are assigned a category. When you click on the image it adds it to a fourth div at the end. When you click on the images they're supposed to go back to the divs they originated from. It's supposed to rely on the data-category attribute in the images. Here is one of the divs:
<div id = "basics" class = "category">
<h2>Basics</h2>
<img src="bottom-bun.png" data-category = "#basics">
<img src="patty.png" data-category = "#basics">
<img src="top-bun.png" data-category = "#basics">
</div>
And here is the JavaScript:
$(function (){
$("#basics").children().on("click", function (){
$("#order").append(this);
})
})
$(function (){
$("#extras").children().on("click", function (){
$("#order").append(this);
})
})
$(function (){
$("#condiments").children().on("click", function (){
$("#order").append(this);
})
})
$(function (){
$("#order").children().on("click", function (){
$(this.data("data-category")).append(this);
})
})
Any help is appreciated.
I just had to remove the.children() after the order and add an img after the click.
Bind click event to parent element (#order)
$(function (){
$("#order").on("click", function ({target}){
console.log(($(target).data("category")))
if($(target).data("category")){
$($(target).data("category")).append($(target));
}
})
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.