<!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. set_include_path() &&get_include_path()用法

    function initialize(){    set_include_path(get_include_path().PATH_SEPARATOR . "core/");   ...

  2. list或map 打印成json 方便调试

    private final Logger logger = Logger.getLogger(this.getClass()); logger.info(JSON.toJSONStringWithDa ...

  3. Codeforces 486D Valid Sets （树型DP）

    题目链接 Valid Sets 题目要求我们在一棵树上计符合条件的连通块的个数. 满足该连通块内,点的权值极差小于等于d 树的点数满足 n <= 2000 首先我们先不管这个限制条件,也就是先考 ...

  4. 新闻:融资600万 他用一套系统优化15大HR工作场景 精简入转调离 月开通214家 | IT桔子

    新闻:融资600万 他用一套系统优化15大HR工作场景 精简入转调离 月开通214家 | IT桔子 功劳说不上

  5. [转】 nginx rewrite规则

    http://www.cnblogs.com/cgli/archive/2011/05/16/2047920.html 最近在VPS上尝试配置安装一个网站,VPS安装了LNMP(Linux+Nginx ...

  6. django的form验证机制

    今天遇到了一个奇怪的问题,django中formview一直返回200,但是却没有执行form_valid方法,然后在其中加了一个form_invalid方法: class StudentRegist ...

  7. BUPT复试专题—字符串处理(2016)

    题目描述 有以下三种操作. (1)COPY l r(0<=l<=r<n),n代表s串的长度.这个表示将s串从l到r的序列复制到剪贴板t里面,覆盖t字符串. 例如s为abcde     ...

  8. 关于结构体的具体解说，C、C++中的差别

    1. C.C++内置的类型分两种,一种是基本数据类型.一种是复合数据类型.此处我们要讲的结构体便是复合数据类型. 先来讨论一下结构体存在的意义吧.或许你觉得主要的数据类型就够了,为什么还要有结构题这样 ...

  9. linux cat 文件操作

    简略版: cat主要有三大功能:1.一次显示整个文件.$ cat filename2.从键盘创建一个文件.$ cat > filename     只能创建新文件,不能编辑已有文件.3.将几个文 ...

  10. Oracle RAC cache fusion原理測试

    Oracle RAC cache fusion是RAC最核心的工作机制.他把全部实例的SGA虚拟成一个大的SGA区,每当不同的实例请求同样的数据块,这个数据块就须要在实例间进行传递. 那究竟什么时候传 ...