Question

我正在努力研究这段代码，因为我想用jQuery创建一个简单的购物车。我要做的是有一个img和一个说“添加”的跨度，当用户点击跨度时，该项目存储在变量上，如果用户想要删除它，则在购物车上创建一个删除的跨度用户选择了什么。我有以下代码。

HTML

<div id="gallery">
   <figure>
    <img src="img.png">
    <span class="add">Add to cart</span>
   </figure>
</div>

<div><ul id="cart"></ul></div>

的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

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

Answer 1

您在代码的这一部分中有错误

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

选择器永远是

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

您可以稍后添加到

$（“＃cart”）。append（// html）..

让我告诉你一个有效的例子

 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");
        var TotalCount =total++ ;
        var htmlToAppend =  "<span class='del' id=" + id + " + data-total=" + TotalCount +" + >  Item No ."+TotalCount +" -- Remove </span> ";
        $("#cart").append(htmlToAppend);
    
    }); 

$("#cart").on("click", ".del", function (evt) {	     
        total =  $(this).closest("ul").find("span").length ;
		console.log(total);
        $(".items").text(total + "$");
		$(this).remove();         
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="gallery">
   <figure>
    <img src="img.png">
    <span class="add">Add to cart</span>
   </figure>
</div>

<div><ul id="cart"></ul></div>

Jquery购物车添加和删除

1 个答案: