<!DOCTYPE html>

<html>
<head>
<meta charset=UTF-8 />
<title>无标题文档</title>
<style>
p.p_num {
    width: 78px;
    height: 24px;
    border-top: solid 1px #d0d0d0;
    position: relative;
    border-bottom: solid 1px #d0d0d0;
    margin-top: -3px;
}
 
span.sy_minus,span.sy_plus {
    width: 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 {
    width: 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>

js 购物车中，多件商品数量加减效果修改，实现总价随数量加减改变的更多相关文章

  1. jquery 页面加载效果

    30个jquery 页面加载效果 30个jquery 页面加载效果   30 CSS Page Preload Animations   加载效果列表 Square Animations Demo 1 ...

  2. 071——VUE中vuex之使用getters计算每一件购物车中商品的总价

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 070——VUE中vuex之使用getters计算每一件购物车中商品的总价

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 利用 jQuery 操作页面元素的方法，实现电商网站购物车页面商品数量的增加和减少操作，要求单项价格和总价随着数量的改变而改变

    查看本章节 查看作业目录 需求说明: 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变 当用户单击"+" ...

  5. 服务器文档下载zip格式 SQL Server SQL分页查询 C#过滤html标签 EF 延时加载与死锁 在JS方法中返回多个值的三种方法（转载） IEnumerable,ICollection,IList接口问题 不吹不擂，你想要的Python面试都在这里了【315+道题】 基于mvc三层架构和ajax技术实现最简单的文件上传 事件管理

    服务器文档下载zip格式   刚好这次项目中遇到了这个东西,就来弄一下,挺简单的,但是前台调用的时候弄错了,浪费了大半天的时间,本人也是菜鸟一枚.开始吧.(MVC的) @using Rattan.Co ...

  6. 动态加载JS过程中如何判断JS加载完成

    在正常的加载过程中,js文件的加载是同步的,也就是说在js加载的过程中,浏览器会阻塞接下来的内容的解析.这时候,动态加载便显得尤为重要了,由于它是异步加载,因此,它可以在后台自动下载,并不会妨碍其它内 ...

  7. js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件，兼容各大主流浏览器 HTML特殊字符

    js中对arry数组的各种操作小结   最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...

  8. 使用js获取checkbox控件在GridView中的第几行

    这次的知识点是如何使用js获取checkbox控件所在的是第几行!!! 我们可以使用 JavaScript 中自带的 rowIndex 和 cellIndex 来获取行和列的键值 (从0开始) 这两个 ...

  9. JS文件中加载jquery.js

    原文链接:http://blog.csdn.net/whatday/article/details/39553451 最近有一个需求: 1.在一个html中只能引入一个JS文件 不能有JS代码和其他J ...

随机推荐

  1. WAMP本地环境升级php版本

    !!!本次测试未完全成功,仅供提供经验. (1)下载php最新版本 http://windows.php.net/download/ (2)解压放到wamp/bin/php目录下 (3) 从已存在的p ...

  2. (6)DataTable 转换成 Json

    下载  Json.Net DLL      http://www.newtonsoft.com/json    需要FQ using Newtonsoft.Json; public string Da ...

  3. [Bzoj3206][Apio2013]道路费用（kruscal）（缩点）

    3206: [Apio2013]道路费用 Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 536  Solved: 252[Submit][Status ...

  4. codevs 2964公共素数因数

    2964 公共素数因数  时间限制: 1 s  空间限制: 32000 KB  题目等级 : 白银 Silver 题解       题目描述 Description 小单同学刚学习了一个数分解成几个素 ...

  5. spring security原理图及其解释

    用户发出订单修改页面的请求,Access Decision Manager进行拦截,然后对比用户的授权和次页面需要的授权是不是有重合的部分,如果有重合的部分,那面页面就授权成功,如果失败就通知用户. ...

  6. 怎样高速地安装Ubuntu SDK

    我在先前的文章＂Ubuntu SDK 安装＂中已经具体地介绍了怎样安装Ubuntu SDK．可是非常多的开发人员可能在最后安装SDK所须要的chroots时候会失败．这里面的原因是SDK在安装chro ...

  7. BUPT复试专题—最近公共祖先(2014软院)

    题目描述 给出一棵有N个节点的有根树TREE(根的编号为1),对于每组查询,请输出树上节点u和v的最近公共祖先. 最近公共祖先:对于有向树TREE的两个结点u,v.最近公共祖先LCA(TREE u,v ...

  8. JVM 调优 —— 新生代 Survivor 空间不足

    零. 新生代调优规律 增大新生代空间. Minor GC 频率降低, Minor GC 时间上升. 降低新生代空间, Minor GC 频率上升, Minor GC 时间下降 一. 新生代典型问题 先 ...

  9. TCP socket心跳包示例程序

    在做游戏开发时,经常需要在应用层实现自己的心跳机制,即定时发送一个自定义的结构体(心跳包),让对方知道自己还活着,以确保连接的有效性. 在TCP socket心跳机制中,心跳包可以由服务器发送给客户端 ...

  10. 【第四篇章-android平台MediaCodec】解决Observer died. Quickly, do something, ... anything...

    当出现!!!Observer died. Quickly, do something, ... anything...说明你的程序已经出现严重异常了,那会是什么情况呢?这个问题困扰了我许久,后来原来是 ...