javascript - 在购物车中拖动新数据后如何从购物车中删除旧数据

Question

我想编写一些 jQuery 代码，当我们拖入它时，它一次只显示一个值。例如，如果我拖动，Bank那么它应该只Bank在那之后显示。如果我拖动Rent它应该只显示Rent，反之亦然。

在我的 jsFiddle 中有一些代码错误，请帮助我解决它们。

$("#shoppingCart1 ol").droppable({
    // ....
})

我的 jsFiddle

Answer 1

您正在直接附加拖动的项目。您只需要用新的替换旧项目。

因此，将您的功能更改为 -

   var listItem =  $("<li></li>", {
       "text": ui.draggable.text(),
       "data-id": productid

    });
   self.html(listItem);

演示在这里

Answer 2

使用.html() 代替.appendTo()

工作小提琴

$(this).html($("<li></li>", {
    "text": ui.draggable.text(),
        "data-id": productid

}));

Answer 3

您已经从列表中删除了具有类的每个项目，placeholder因此只需将新项目设置为具有类placeholder

        $("<li></li>", {
           "text": ui.draggable.text(),
           "data-id": productid,
           "class": "placeholder"               
        }).appendTo(this);

现在您的代码将找到该项目并将其正确删除。

示例 JSFiddle