码迷,mamicode.com
首页 > Web开发 > 详细

js 购物车的数量加减,对应的总价也随机变化

时间:2019-07-17 09:28:42      阅读:133      评论:0      收藏:0      [点我收藏+]

标签:href   type   log   clear   click   int   inpu   部分   oat   

 

 

html相关的源码:

<div class="goods_num clearfix">
                 <div class="num_name fl">数 量:</div>
                    <div class="num_add fl">
                        <input type="text" name="num" class="num_show fl" value="1">
                        <a href="javascript:;" class="add fr">+</a>
                        <a href="javascript:;" class="minus fr">-</a>
                    </div>
                </div>
<div class="total">总价:<em id="price">{{ good.price }}</em></div>

 

相应的js部分:

 <script>
        $(function () {
            //加号
            var price1 = parseFloat($(‘#price‘).text());
            var num = parseInt($(‘input[name="num"]‘).attr(‘value‘));
            $(‘.add‘).click(function(){
                num++;
                $(‘input[name="num"]‘).attr(‘value‘,num);
                var total = num * price1;
                $(‘#price‘).html(total.toFixed(2));
            });
            //减号
            $(‘.minus‘).click(function () {
                if(num>1){
                    num--;
                    $(‘input[name="num"]‘).attr(‘value‘,num);
                    console.log(num)
                    var total = num * price1;
                    $(‘#price‘).text(total.toFixed(2));
                }


            });
        });
    </script>

 

js 购物车的数量加减,对应的总价也随机变化

标签:href   type   log   clear   click   int   inpu   部分   oat   

原文地址:https://www.cnblogs.com/zhenzi0322/p/11198803.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!