【实用随记】购物车效果--计算件数总额以及加减效果

最新推荐文章于 2022-07-12 20:51:35 发布

兔小几

最新推荐文章于 2022-07-12 20:51:35 发布

阅读量567

点赞数

本文链接：https://blog.csdn.net/mercury8862/article/details/38086243

版权

<pre name="code" class="html"><span style="color:#ff0000;"><input class="this-num" type="text" min="1" max="99" pattern="[0-9]" maxlength="2" onKeyPress="if ((event.keyCode<48 || event.keyCode>57)) event.returnValue=false" value="98"></span>

</pre><pre name="code" class="html">

<div class="wrapper">
        <!--header s-->
        <div class="header">
            <div class="title">我的购物车</div>
            <div class="back"><a href="javascript:history.back();"><img src="{$pm_img}/head-back.png" height="88" alt="back"/></a></div>
        </div>
        <!--header e-->
        <!--edit content s-->
        <div class="index-content">
            <div class="edit">
                <div class="item">
                    <div class="item-card">
                        <div class="select select-yes"></div>
                        <div class="goods-show">
                            <p>番茄大杂烩</p>
                            <p>¥15.00/份</p>
                        </div>
                        <div class="goods-num">
                            <div class="minus"></div>
                            <div class="goods-num-input">
                                <input class="this-num" type="text" min="1" max="99" pattern="[0-9]" maxlength="2" onKeyPress="if ((event.keyCode<48 || event.keyCode>57)) event.returnValue=false" value="1">
                            </div>
                            <div class="plus"></div>
                        </div>
                    </div>

                    <div class="item-card">
                        <div class="select select-yes"></div>
                        <div class="goods-show">
                            <p>番茄大杂烩</p>
                            <p>¥10.00/份</p>
                        </div>
                        <div class="goods-num">
                            <div class="minus"></div>
                            <div class="goods-num-input">
                                <input class="this-num" type="text" min="1" max="99" pattern="[0-9]" maxlength="2" onKeyPress="if ((event.keyCode<48 || event.keyCode>57)) event.returnValue=false" value="98">
                            </div>
                            <div class="plus"></div>
                        </div>
                    </div>

                </div>
            </div>

                

            </div>
            <div class="edit">
                <div class="item">
                    <div class="total">
                        <span>共1件商品</span>
                        <span>合计：15元</span>
                    </div>
                </div>
            </div>
            <a href="{$pm_base_url}member/ordersure"><div class="member-btn">确认订餐</div></a>
        </div>
        <!--edit content e-->
    </div>

  resultItem();
    //勾选
    $('.select').click(function() {
        $(this).toggleClass('select-yes');
        resultItem();
    });
    //输入框失焦传参给value
    $('.this-num').blur(function(){
        var thisVal = parseInt($(this).val());
        $(this).attr('value',thisVal); 
        resultItem();
    })
    //加减数目
    $('.plus').click(function(){
        var thisNum = parseInt($(this).parent('.goods-num').find('.this-num').attr('value'));
        if(thisNum < 99){
            $(this).parent('.goods-num').find('.this-num').attr('value',thisNum+1);
            $(this).parent('.goods-num').find('.this-num').val(thisNum+1);
            resultItem();
            }
    });
    $('.minus').click(function(){
        var thisNum = parseInt($(this).parent('.goods-num').find('.this-num').attr('value'));
        if(thisNum > 1){
            $(this).parent('.goods-num').find('.this-num').attr('value',thisNum-1);
            $(this).parent('.goods-num').find('.this-num').val(thisNum-1);
            resultItem();
        }
    });
    //合计
    function resultItem(){
        var result1 = 0;
        var result2 = 0;
        $('.select-yes').each(function(){
            var strItem = $(this).parent('.item-card').find('.goods-show p:last-child').html();
            var itemPri = parseInt(strItem.substring(1));
           result1 += parseInt($(this).parent('.item-card').find('.this-num').val());
           result2 += parseInt($(this).parent('.item-card').find('.this-num').val()) * itemPri;
        });
        $('.total span:first-child').html('共'+ result1 + '件商品');
        $('.total span:last-child').html('合计：'+ result2 +'元');
    }