如何将图像返回到特定的div?

Question

我正在制作一个网站，您可以在网站中使用图像构建汉堡。图像存储在单独的div中，并被分配一个类别。当你点击图片时，它会在最后添加第四个div。当你点击图片时，它们应该会回到它们最初的位置。它应该依赖于图像中的data-category属性。下面是其中一个div:

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

这里是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);
})
})

任何帮助都是感激的。

Answer 1

我只需要删除订单后的。children()，并在点击后添加一个img。

Answer 2

将click事件绑定到父元素(#order)

$(function (){
$("#order").on("click", function ({target}){
console.log(($(target).data("category")))
if($(target).data("category")){
$($(target).data("category")).append($(target));
}            
})
})