JQuery实现购物车基本效果

 

前端代码,这里我用的是活数据

 

            <div class="cart-item-list">
                <div class="cart-shop">
                    <input type="checkbox" name="" id="" value="" />
                    <span class="shopname self">传智自营</span>
                </div>
                <div class="cart-body">
                    <div class="cart-list">
                        {foreach $data as $v}
                        <ul class="goods-list yui3-g">
                            <li class="yui3-u-1-24">
                                <input type="checkbox" class="row_check" name="check" id="" value="" />
                            </li>
                            <li class="yui3-u-6-24">
                                <div class="good-item">
                                    <div class="item-img"><img src="__STATIC__/home/img/goods.png" /></div>
                                    <div class="item-msg">{$v.goods_name}</div>
                                </div>
                            </li>
                            <li class="yui3-u-5-24">
                                <div class="item-txt">{$v.goods_attr}</div>
                            </li>
                            <li class="yui3-u-1-8"><span class="price">{$v.goods_price}</span></li>
                            <li class="yui3-u-1-8">
                                <a href="javascript:void(0)" class="increment mins">-</a>
                                <input autocomplete="off" type="text" value="{$v.number}" minnum="{$v.number}" class="itxt current_number" />
                                <a href="javascript:void(0)" class="increment plus">+</a>
                            </li>
                            <li class="yui3-u-1-8"><span class="sum">{$v.goods_price}</span></li>
                            <li class="yui3-u-1-8">
                                <a href="#none" class="delete">删除</a><br />
                                <a href="#none">移到我的关注</a>
                            </li>
                        </ul>
                        {/foreach}
                    </div>
                </div>
            </div>
        </div>
        <div class="cart-tool">
            <div class="select-all">
                <input type="checkbox" class="check_all box" name="" value="" />
                <span>全选</span>
            </div>
            <div class="option">
                <a href="#none">删除选中的商品</a>
                <a href="#none">移到我的关注</a>
                <a href="#none">清除下柜商品</a>
            </div>
            <div class="money-box">
                <div class="chosed">已选择<span id="total_number">0</span>件商品</div>
                <div class="sumprice">
                    <span><em>总价（不含运费） ：</em><i id="total_price" class="summoney">¥0</i></span>
                    <span ><em>已节省：</em><i class="zong">-¥0</i></span>
                </div>
                <div class="sumbtn">
                    <a class="sum-btn" href="javascript:;" target="_blank">结算</a>
                </div>
            </div>
        </div>

 

 

 

 效果

 

 

js代码

 

<script>
    //加号
    $(".plus").click(function () {
        //获取数字数量
        var number = $(this).prev().val();
        //自增1
        var last_number = parseInt(number)+1;
        //替换 此处我的html代码用的是value值 根据你们的代码也可以换成 text替换；
        $(this).prev().val(last_number);
        //获取单价
        var price = $(this).parent(".yui3-u-1-8").siblings(".yui3-u-1-8").children(".price").text();
        //计算出小计总价
        var sum_price = price * last_number;
        //如果当前行的多选按钮选择 则替换总价
        $checked = $(this).parent(".yui3-u-1-8").siblings(".yui3-u-1-24").children(".row_check").prop('checked');
        if ($checked){
            $(".summoney").text(sum_price);
        }
    })
    //减号
    $(".mins").click(function () {
        //获取数字数量
        var number = $(this).next().val();
        //自减1
        var last_number = parseInt(number)-1 <= 1 ? 1 :parseInt(number)-1 ;
        //替换 此处我的html代码用的是value值 根据你们的代码也可以换成 text替换；
        $(this).next().val(last_number);
        //获取单价
        var price = $(this).parent(".yui3-u-1-8").siblings(".yui3-u-1-8").children(".price").text();
        //计算出小计总价
        var sum_price = price * last_number;
        //如果当前行的多选按钮选择 则替换总价
        $checked = $(this).parent(".yui3-u-1-8").siblings(".yui3-u-1-24").children(".row_check").prop('checked');
        if ($checked){
            $(".summoney").text(sum_price);
        }
    })
</script>

效果