• jq实现购物车结算和数量更改功能


    这是个仿碧欧泉官网的购物车结算页面。

    这里仅提供思路和我的代码作参考,代码具体需要看自己的html界面。

    其中的难点在于数量的更改以及价格的结算。当出现一个商品时的结算是较为简单的。但是若有多个商品,则每个数量的更改应有对应的价格。

    (几乎所有有实际应用功能的购物车都是如此,所以从一开始做的时候就应该往这个方面去想。)

    首先:在html界面写出数量变化的代码,并绑定事件

    <td class="cart-table-content-td4">
           <input type="button" value="-" onclick="del(this)"/>
           <input type="text" class="text_box" value="1" />
           <input type="button" value="+" onclick="add(this)"/>
     </td>

    当按下【+】按钮时:

       function add(q){
            var good_num = $(q).parent().find('input[class*=text_box]');    //找到商品数量
            var old_num = $(good_num).val();               //获取商品数量的值
            var new_num=parseInt(old_num)+1;              //商品数量+1
            $(good_num).val(new_num);                  //商品数量赋值
                    // 到这里商品数量的操作已经完成
                    
            var one_price=$(q).parent().parent().find(".product-price span").text();  //找到该商品单价
            var new_money=parseInt(one_price)*parseInt((good_num).val());  //获取单价*数量的总价的值
            var total_price = $(q).parent().parent().find(".font-total-price span");  //找到该商品总价
            $(total_price).text(new_money);                 //该商品总价赋值
                    // 到这里该商品总价的计算操作已经完成
                    
            var a= $(".font-total-price span");                //找到所有商品的总价
            var m=0;                                                                    //遍历,获取,将字符串转化为数字,并相加
            for(var i=0;i<a.length;i++){
                m+=Number(a[i].textContent);
            }
            $("#all_price").text("¥"+m);                //赋值给总商品价格
            $("#all_total_price").text("¥"+m);    //赋值给总价
                    //到这里商品总结算已经完成
        }

     当按下【-】按钮时:(思路与【+】相似,不同之处是多了一个判断,商品数量不能小于1)

    function del(q){
            var good_num = $(q).parent().find('input[class*=text_box]');
            var old_num = $(good_num).val();
            var new_num=parseInt(old_num)-1;
            $(good_num).val(new_num);
            if(new_num<1){
                    alert("再减就没有了!");
                    $(good_num).val(1);;
            }
        var one_price=$(q).parent().parent().find(".product-price span").text();
        var new_money=parseInt(one_price)*parseInt((good_num).val());
        var total_price = $(q).parent().parent().find(".font-total-price span");
        $(total_price).text(new_money);
        var a= $(".font-total-price span");
        var m=0;
        for(var i=0;i<a.length;i++){
            m+=Number(a[i].textContent);
        }
        $("#all_price").text("¥"+m);
        $("#all_total_price").text("¥"+m);
        }

  • 相关阅读:
    新年新方向-斩获新职位
    专利之家:让灵感冒冒泡
    转帖:专利之家
    WPF:Localization 基础
    WPF教程.002
    有关XXX产品研发管理约定
    转帖:曲线路标北京前门上岗
    超出想象-超级终端显示器
    小e的每日一画 之 小男孩在太阳下敬礼 20080102
    小e的每日一画 之 飞毯旅行记 20071231
  • 原文地址:https://www.cnblogs.com/shendan/p/9678974.html
Copyright © 2020-2023  润新知