從僅基於JQuery的購物車中刪除商品

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功能之外>

看看我的演示： 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 + "$");
});

更改說明：

1. 首先，我不確定為什么在jQuery閉包之外還有sum和num變量。 這使得它們在不需要時成為全局變量，這是一個壞習慣。
2. 您的“ .cancel”事件處理程序嵌套在“ .buy”處理程序中。 它應該處於同一級別。
3. 您需要將每個購物車項目包裝在一個元素中，這將便於以后選擇。
4. “ .cancel”處理程序應易於說明。 它只是刪除項目並更新總數。