zoukankan      html  css  js  c++  java
  • 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);
        }

  • 相关阅读:
    信贷基本词汇英汉对照[突然发现写软件也要被迫学企业管理的一些相关知识....]
    英语学习网站收集
    简单的WindowsForm Client与WebService通信例子[对象的序列化与反序列化]
    .Net String 一些比较少用的Format操作【今天用到的】
    HSSWORKBOOK中读取Excel出现的异常现象
    [Utility.sln]根据MSDN上的DESCryptoServiceProvider 类 尝试写的对称密钥加密原代码[可应用于安全级别不高的数据连接和密码保护]
    SAP Menu Tree
    中国的IT需要这样一种精神...[转载自CSDN.写的很深刻...]
    针式PKM的设计原则
    将你的记忆量减到最少
  • 原文地址:https://www.cnblogs.com/shendan/p/9678974.html
Copyright © 2011-2022 走看看