Question

我正在尝试构建一个JQuery购物车，仅用于锻炼和学习支持。但我有一个问题，编码从购物车中删除项目的选项。这是代码：

<script src="assets/jquery-2.1.0.js" type="text/javascript"></script>
<script type="text/javascript">
    var sum=0;
    var num=1;
    $(function() {          
        //Assign the producets a price date
        $( "#Product1" ).data( "price", 400 );
        $( "#Product2" ).data( "price", 500 );
        $( "#Product3" ).data( "price", 600 );

        //Adding the requested producted to the shopping cart
        $(".buy").on("click",function(evt) {
            var id=$(this).attr("id");
            $("#shopping_cart_items").append($(this).attr( "id" ) + " " +  "price: ");
            $("#shopping_cart_items").append($(this).data( "price" ) + "$" + "<img src='assets/x.png' width='10px' height='10px' class='cancel' id="
            +id + " + data-num= "+ num++ + " + >" + "<br>");

            //summing up the overall price
            sum=sum+$(this).data( "price" );
            $("#sum").text(sum+ "$");

            //Delete product from the shopping cart
            $(".cancel").on("click",function(evt) {
                //?
            }); 
        });
    });

</script>
<style>
#product img{
    width:300px;
    height:200px;   
}
#product{
    float: left;
    padding:5px;    
}
</style>
<h2>My shop</h2>

<div id="product"><img src="assets/Product1.jpg" /><br /><input type="button" value="Buy" class="buy" id="Product1" />&nbsp;price:400$</div>
<div id="product"><img src="assets/Product2.jpg" /><br /><input type="button" value="Buy" class="buy" id="Product2"/>&nbsp;price:500$</div>
<div id="product"><img src="assets/Product3.jpg" /><br /><input type="button" value="Buy" class="buy" id="Product3" />&nbsp;price:600$</div><br />
<div id="shopping_cart" align="center">
<h1>Shopping cart</h1>
<hr />
    <div id="shopping_cart_items">
    </div>
 <hr />
 Sum:<div id="sum">0$</div>
</div>

我给每个产品一个唯一的数字，以便从购物车中删除它，我知道我将需要使用.remove()，但我尝试了很多次以不同的方式，并且无法获得没错。

Answer 1

您必须将购物车产品包装在元素中，以便稍后将其删除。此外，您的删除代码位于错误的地方，必须在购买click功能＆gt;

之外

请参阅我的演示：http://jsfiddle.net/GBF7m/

var sum = 0;
var num = 1;
$(function () {
    //Assign the producets a price date
    $("#Product1").data("price", 400);
    $("#Product2").data("price", 500);
    $("#Product3").data("price", 600);

    //Adding the requested producted to the shopping cart
    $(".buy").on("click", function (evt) {
        var id = $(this).attr("id");
        $("<span/>", {
            html: $(this).attr("id") + " " + "price: " + $(this).data("price") + "$" + "<img src='http://placehold.it/20x20' width='20px' height='20px' class='cancel' id=" + id + " + data-num= " + num+++" + ><br />",
                "data-price": $(this).data("price")
        }).appendTo("#shopping_cart_items");


        //summing up the overall price
        sum = sum + $(this).data("price");
        $("#sum").text(sum + "$");
    });

    //Delete product from the shopping cart
    $("#shopping_cart_items").on("click", ".cancel", function (evt) {
        $(this).parent("span").remove();
        sum = sum - $(this).parent("span").data("price");
        $("#sum").text(sum + "$");
    });
});

Answer 2

试试这个：http://jsfiddle.net/tonicboy/68yyr/

var sum = 0;
var num = 1;
//Assign the producets a price date
$("#Product1").data("price", 400);
$("#Product2").data("price", 500);
$("#Product3").data("price", 600);

//Adding the requested producted to the shopping cart
$(".buy").on("click", function (evt) {
    var id = $(this).attr("id"),
        item = $('<div class="cart-item"></div>');
    item.append($(this).attr("id") + " " + "price: ");
    item.append($(this).data("price") + "$" + "<img src='assets/x.png' width='10px' height='10px' class='cancel' id=" + id + " + data-num= " + num++ + " data-price='" + $(this).data("price") + "' >" + "<br>");

    item.appendTo($("#shopping_cart_items"));

    //summing up the overall price
    sum = sum + $(this).data("price");
    $("#sum").text(sum + "$");
});

//Delete product from the shopping cart
$("#shopping_cart").on("click", ".cancel", function (evt) {
    var $this = $(evt.currentTarget),
        cartItem = $this.parent(),
        newPrice = parseInt($this.data('price'));

    cartItem.remove();
    sum = sum - newPrice;
    $("#sum").text(sum + "$");
});

更改说明：

首先，我不确定为什么你有jQuery闭包之外的sum和num变量。这使得它们在不需要时成为全局变量，这是一种不好的做法。
您的'.cancel'事件处理程序嵌套在'.buy'处理程序中。它应该在同一水平上。
您需要将每个购物车项目包装在一个元素中，以便以后更容易选择。
'.cancel'处理程序应该是自解释的。它只是删除了项目并更新了总数。

仅从基于JQuery的购物车中删除项目

2 个答案: