带添加和删除功能的Jquery购物车

我正在努力编写这段代码，因为我想使用jQuery创建一个简单的购物车。我想做的是有一个img和一个span，上面写着“添加”，当用户点击span时，它会将项目存储在一个变量上，如果用户想要删除它，在购物车上创建一个span，删除用户选择的内容。我有以下代码

HTML

添加到购物车

jQuery

$(document).ready(function() {

var total = 1; //variable to count items 

//make span clickable and adding to shopping cart.
$(".add").on("click", function (evt) {
    var id = $(this).attr("id");

    $("<span/>", {
        html: $(this).attr("id") + ".add" + "<span class='del' id=" + id + " + data-total=" + total+++" + >Remove </span>"
            "data-total": $(this).data(".add")
    }).appendTo("cart");

});


//Delete items from shopping cart
    $("#cart").on("click", ".cancel", function (evt) {
        $(this).parent("span").remove();
        total = total - $(this).parent("span").data(".add");
        $(".items").text(total + "$");
    });


}); //End main function

$（文档）.ready（函数（）{
var total=1；//用于计数项目的变量
//使跨度可点击并添加到购物车。
$（“.add”）。在（“单击”，函数（evt）{
var id=$（this.attr（“id”）；
$("", {
html:$（this.attr（“id”）+”。添加“+”删除
“数据总计”：$（此）.data（“.add”）
}).附件（“购物车”）；
});
//从购物车中删除项目
$（“#购物车”）。在（“单击”，“取消”，功能（evt）{
$（this.parent（“span”）.remove（）；
总计=总计-$（此）.parent（“span”）.data（“添加”）；
$（“.items”）.text（总计+“$”）；
});
}); //终端主功能

我将感谢所有能得到的帮助。

---

谢谢

这部分代码中有错误

$("<span/>", {
        html: $(this).attr("id") + ".add" + "<span class='del' id=" + id + " + data-total=" + total+++" + >Remove </span>"
            "data-total": $(this).data(".add")
    }).appendTo("cart");

$（“”{
html:$（this.attr（“id”）+”。添加“+”删除
“数据总计”：$（此）.data（“.add”）
}).附件（“购物车”）；

选择器总是

$（“span”）.html（//something）

以后可以附加到其中

$（“#购物车”）。追加（//html）

让我给你看一个工作示例

var总计=1//用于计数项目的变量
//使跨度可点击并添加到购物车。
$（“.add”）。在（“单击”，函数（evt）{
var id=$（this.attr（“id”）；
var TotalCount=total++；
var htmlToAppend=“项目编号”+TotalCount+“--Remove”；
$（“#购物车”）.append（htmlToAppend）；
}); 
$（“#购物车”）。在（“单击”，“删除”，函数（evt）{
总计=$（此）.最近的（“ul”）.查找（“span”）.长度；
控制台日志（总计）；
$（“.items”）.text（总计+“$”）；
$（this.remove（）；
});

添加到购物车
发生了什么事以及您遇到了什么困难？它不会将项目存储在变量上，也不会将其添加到shooping中cart@xTuckii我可以添加到购物车上…单击..检查我的回答我需要一些关于.Add类html的帮助…你能告诉我更多吗这似乎可以解决问题，单击“删除范围”时，它不会从Cart中删除该项，因为没有任何用于span click的onclick处理程序…让我看看可以对代码做些什么..以最干净的方式删除span是的，发现了问题…要删除的类实际上是.del¬.cancel..如果我们替换它..那么删除将起作用..检查我的更新答案，它工作得很好！！我甚至没有看到取消。谢谢你的帮助！：）有没有办法通过.onClick函数添加img旁边的文本？并使用删除功能显示它@拉贾
$("<span/>", {
        html: $(this).attr("id") + ".add" + "<span class='del' id=" + id + " + data-total=" + total+++" + >Remove </span>"
            "data-total": $(this).data(".add")
    }).appendTo("cart");