利用JQuery实现简单的购物车结算

最新推荐文章于 2022-05-18 00:45:54 发布

顾白的顾小白

最新推荐文章于 2022-05-18 00:45:54 发布

阅读量3k

点赞数

分类专栏： JScript 购物车系统文章标签： jquery

本文链接：https://blog.csdn.net/lhf294/article/details/77168549

版权

本文介绍了如何借助JQuery实现一个基本的购物车结算功能。通过选择商品，增加和减少数量，以及总价计算，展示了JQuery在前端交互中的应用。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
        <script>
        /*删除*/
            $(function(){
    
    $(".blue").bind("click",function(){
    
        $(this).parent().parent().remove();
        totalPrice();
    });

    /*当鼠标离开文本框时，获取当前值，调用totalPrice()函数进行结算*/
    $(".shopping_product_list_5 input").bind("blur",function(){
    
        var t = $(this).val();
        totalPrice(); 
    });
    var allPrice = 0;
    var allReduce = 0;
    var allCount = 0;

    $("#myTableProduct tr").each(function(){
        /*循环购物车列表的每一行*/
        var num = parseInt($(this).find(".shopping_product_list_5 input").val());    /*获取文本框中数量值*/
        var price = parseFloat($(this).find(".shopping_product_list_4 label").text()); /* 获取商品价格*/
        var total = price * num;
        allPrice += total;  /*计算所有商品的总价格*/

        /*获取节省的金额*/
        var reduce = parseFloat($(this).find(".shopping_product_list_3 label").text()) - parseFloat($(this).find(".shopping_product_list_4 label").text());
        var reducePrice = reduce*num;
        allReduce +=reducePrice;

        /*获取积分*/
        var count = parseFloat($(this).find(".shopping_product_list_2 label").text());
        allCount +=count;
    });
    $("#product_total").text(allPrice.toFixed(2));  /*填写计算结果，其中利用toFixed()函数保留两位小数*/
    $("#product_save").text(allReduce.toFixed(2));
    $("#product_integral").text(allCount.toFixed(2));
});
 function totalPrice(){
    
    var allPrice = 0;
    var allReduce = 0;
    var allCount = 0;
    $("#myTableProduct tr").each(function(){
    
        var num = parseInt($(this).find(".shopping_product_list_5 input").val());
        var price = parseFloat($(this).find(".shopping_product_list_4 label").text());
        var total = price * num;
        allPrice += total;

        var reduce = parseFloat($(this).find(".shopping_product_list_3 label").text()) - parseFloat($(this).find(".shopping_product_list_4 label").text());
        var reducePrice = reduce*num;
        allReduce +=reducePrice;

        var count = parseFloat($(this).find(".shopping_product_list_2 label").text());
        allCount +=count;
    });
    $("#product_total").text(allPrice.toFixed(2));
    $("#product_save").text(allReduce.toFixed(2));
    $("#prod