• js 购物车中,多件商品数量加减效果修改,实现总价随数量加减改变


    <!DOCTYPE html>

    <html>
    <head>
    <meta charset=UTF-8 />
    <title>无标题文档</title>
    <style>
    p.p_num {
         78px;
        height: 24px;
        border-top: solid 1px #d0d0d0;
        position: relative;
        border-bottom: solid 1px #d0d0d0;
        margin-top: -3px;
    }
     
    span.sy_minus,span.sy_plus {
         15px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        display: block;
        position: absolute;
        top: 0px;
        font-size: 14px;
        border: solid 1px #d0d0d0;
        background: #ebebeb;
        cursor: pointer;
        border-top: none;
        border-bottom: none;
    }
     
    span.sy_minus {
        left: 0px;
    }
     
    span.sy_plus {
        right: 0px;
    }
     
    input.sy_num {
         44px;
        height: 18px;
        line-height: 24px;
        text-align: center;
        position: absolute;
        top: 0px;
        left: 17px;
    }
     
    span.sy_num {
        padding: 5px 8px;
        border: solid 1px #d0d0d0;
        border-left: none;
        border-right: none;
        cursor: pointer;
    }
    </style>
    <script type="text/javascript" src="jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready (function ()
        {
            var pl = $("p:last");
            var reg = /(.*[::]s*)([+d.]+)(s*元)/g;
            $ (".sy_minus").click (function ()
            {
                var me = $ (this), txt = me.next (":text"), pc = me.closest("p");
                var val = parseFloat (txt.val ());
                val = val < 1 ? 1 : val;
                txt.val (val - 1);
                var price = parseFloat (pc.prev("p").text().replace(reg,'$2')) * txt.val ();
                pc.next("p").text (pc.next("p").text().replace(reg, "$1" + price + "$3"));
                var sum = 0;
                $(".p_num").next("p").each(function (i, dom)
                {
                    sum += parseFloat ($(this).text().replace(reg, "$2"));
                });
                pl.text(pl.text().replace(reg, "$1" + sum + "$3"));
            });
             
            $(".sy_plus").click (function ()
            {
                var me = $ (this), txt = me.prev (":text"), pc = me.closest("p");
                var val = parseFloat (txt.val ());
                txt.val (val + 1);
                var price = parseFloat (pc.prev("p").text().replace(reg,'$2')) * txt.val ();
                pc.next("p").text (pc.next("p").text().replace(reg, "$1" + price + "$3"));
                var sum = 0;
                $(".p_num").next("p").each(function (i, dom)
                {
                    sum += parseFloat ($(this).text().replace(reg, "$2"));
                });
                pl.text(pl.text().replace(reg, "$1" + sum + "$3"));
            });
        })[0].onselectstart = new Function ("return false");
    </script>
    </head>
    <body>
        <div class="">
            <p class="">单价:36元</p>
            <p class="p_num">
                <span class="sy_minus" id="sy_minus_gid1">-</span
                <input class="sy_num" id="sy_num_gid1" readonly="readonly" type="text" name="number1" value="1" /> 
                <span class="sy_plus" id="sy_plus_gid1">+</span>
            </p>
            <p class="">需支付:36元</p>
        </div>
        <div class="">
            <p class="">单价:58元</p>
            <p class="p_num">
                <span class="sy_minus" id="sy_minus_gid2">-</span
                <input class="sy_num" id="sy_num_gid2" readonly="readonly" type="text" name="number1" value="1" /> 
                <span class="sy_plus" id="sy_plus_gid2">+</span>
            </p>
            <p class="">需支付:58元</p>
        </div>
        <p class="">总共需要支付:94元</p>
    </body>
    </html>
  • 相关阅读:
    利用Clojure统计代码文件数量和代码行数
    Workflow:添加工作流存储功能
    MongoDB:最简单的增删改查(Oops,可能太简单了)
    《WF in 24 Hours》读书笔记
    推荐一个学习python的网站
    Inter系列处理器名称浅析
    [Android1.5]TextView跑马灯效果
    Code::Blocks 的配色方案
    PuTTY + Xming 远程使用 Linux GUI
    Linux下查看文件和文件夹大小
  • 原文地址:https://www.cnblogs.com/lvlina/p/5287328.html
Copyright © 2020-2023  润新知