<!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. hdu - 3836 Equivalent Sets(强连通)

    http://acm.hdu.edu.cn/showproblem.php?pid=3836 判断至少需要加几条边才能使图变成强连通 把图缩点之后统计入度为0的点和出度为0的点,然后两者中的最大值就是 ...

  2. Codeforces 864E Fire（DP）

    题目链接 Fire 题意 有n个物品,每个物品的挽救时间代价为ti, 消失时刻为di, 价值为pi. 如果要救某个物品,必须在他消失之前救出来. 同一时刻最多只能救一件物品. 当前耗时为当前已经救出的 ...

  3. 让win7任务条上的文件夹打开是c,d,e,f而不是库

    如果资源管理器是打开的,则右键点击资源管理器的图标,在跳出的菜单中,右键点击“Windows资源管理器”,选择“属性”. 在“快捷方式’选项卡,“目标”一栏,默认的是 %windir%\explore ...

  4. 用canvas实现一个colorpicker

    http://www.cnblogs.com/ufex/p/6382982.html 每个浏览器都有自己的特点,比如今天要做的colorpicker就是,一千个浏览器,一千个哈姆雷特,一千个color ...

  5. SqlServer 数据恢复

    首先看看微软官方的给出的建议(摘自:http://technet.microsoft.com/zh-cn/library/ms189272.aspx): 在从完整恢复模式或大容量日志恢复模式切换前,请 ...

  6. 【C#】高级语言特有的单例模式

    public class Singleton { private Singleton () { } // 变量标记为 readonly.第一次引用类的成员或创建实例时,仅仅实例化一次instance对 ...

  7. 与linux相处的日子里

    在前几天装了一下linux操作系统,并安装了几个经常使用的工具.如今就谈谈我的感受吧! 对一个连linux几个字母都不会拼写的人来说.让我參与这个工作可谓是:"太残忍啦!"当然这在 ...

  8. 一种client同步server数据的方案

    场景 clientA不定时地把本地数据同步到server上,然后还有一个clientB(app)从server把数据同步下来,汇总展示 clientA数据结构 原始的数据(来自clientA).每条都 ...

  9. vmware Unable to open kernel device "\\.\Global\vmx86": The system cannot find the file 的解决方法

    https://communities.vmware.com/thread/245800?start=0&tstart=0 I have exactly same issue.  I star ...

  10. (WPF)Storyboard

    Storyboard是一个为其所包括的动画提供目标信息的容器. 除非动画放在Storyboard中,负责不能在XMAL中被实例化. BeginStoryboard通过将Storyboard加入到触发器 ...