<!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. 代码布局relativeLayout

    后台布局   在ANDROID 开发中有时候我们需要在后台添加布局文件这里我们来说一下后台添加RelativeLayout文件的方式: RelativeLayout,顾名思义,就是以“相对”位置/对齐 ...

  2. JDBC 数据库连接 Java操作数据库 jdbc快速入门

    JDBC基本概念 Java DataBase Connectivity 数据库连接 java操作数据库 本质上(sun公司的程序员)定义的一套操作关系型数据库的规则 既接口  更新内容之前 代码 pa ...

  3. easyui分页时，总页数出错

    错误出现 MyBatis用easyui写后台分页代码时,出现翻页后显示总页数错误 代码如下 可能原因在于后台mappers.xml里的sql语句错误 <select id="getPr ...

  4. 使用ftrace学习linux内核函数调用

    http://www.cnblogs.com/pengdonglin137/articles/4752082.html 转载: http://blog.csdn.net/ronliu/article/ ...

  5. CentOS6.5升级手动安装GCC4.8.2 与 CentOS 6.4 编译安装 gcc 4.8.1

    http://blog.163.com/zhu329599788@126/blog/static/6669335020161179259975 http://www.cnblogs.com/codem ...

  6. ArcCatalog中通过ArcSDE向Oracle数据库中导入数据

    将数据导入到Oracle指定的表空间的具体内容如下: 首先,在ArcCatalog中建立指定表空间的数据库连接(要以指定表空间的用户登录): 然后,在ArcCatlog中定位到数据源,选中并拷贝图层; ...

  7. 自己动手实现浏览器，21天自制chromium:起手篇

    转:https://zhuanlan.zhihu.com/p/29101613?utm_medium=social&utm_source=qq 大家好,我又来了.这篇是21天自制原子弹的姐妹篇 ...

  8. [iOS]APP代码实践：建立一个辅助的APP类,降低对AppDelegate的改动

    郝萌主倾心贡献.尊重作者的劳动成果,请勿转载. [UIApplication sharedApplication].delegate 可是时间长了还是认为这样不太好,AppDelegate本身有其自己 ...

  9. Loadrunner IP欺骗

    一.为什么要设置IP欺骗 1. 当某个IP的訪问过于频繁,或者訪问量过大时,server会拒绝訪问请求.这时候通过IP欺骗能够添加訪问频率和訪问量,以达到压力測试的效果. 2. 某些server配置了 ...

  10. JfreeChart折线图 CSDN-李鹏飞

    今天公司里分配给我的工作是JfreeChart折线图本人之前也没接触过如今让我们大家一起完毕! 在这个公司,用到了太多的JfreeChart,今天就对折线图作一个总结,希望对大家有点帮助,我这里直接是 ...