购物车数量加减代码

.amount-wrap .icon{
    display: inline-block;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    border: 1px solid #cdcdcd;
    background-color: #eee;
    vertical-align: middle;
}
.amount-wrap .icon-minus {
    border-right: 0;
}
.amount-wrap .icon-plus {
    border-left: 0;
}
.amount-wrap input {
    width: 40px;
    margin-bottom: 0;
    text-align: center;
    vertical-align: middle;
}
<td class="amount-wrap"><a href="#" class="icon icon-minus"></a><input type="text" value="1"><a href="#" class="icon icon-plus"></a></td>
$(‘#orderList‘).find(‘input[type="text"]‘).on(‘keyup paste input‘,function(){
        this.value = ~~this.value.replace(/\D/g,‘‘);
        if(this.value == ‘‘) this.value = 0;
        setTotal();
    });
    $(‘#selectList‘).on(‘keyup paste input‘,‘input[type="text"]‘,function(){
        this.value = ~~this.value.replace(/\D/g,‘‘);
        if(this.value == ‘‘) this.value = 0;
        setTotal();
    });
    $(‘#orderList .minus‘).on(‘click‘,function(e){
        e.preventDefault();
        var t = $(this).parent().find(‘input[type="text"]‘)
            ,tit = $(this).parents(‘li‘).find(‘h2 > a‘).html()
            ,price = $(this).parents(‘li‘).find(‘span.order-price > i‘).html()
            ,pid = $(this).parents(‘li‘).attr(‘id‘)
            ,index = $(this).parents(‘li‘).index()
            ,catid = $(‘.swiper-nav‘).find(‘.swiper-slide‘).eq(index).data(‘catid‘)
            ,cattit = $(‘.swiper-nav‘).find(‘.swiper-slide‘).eq(index).find(‘.title‘).html()
            ,$hasPid = $("#selectList").has(‘#s-‘+ pid);
        if(parseInt(t.val()) > 0 ){
            t.val(parseInt(t.val())-1);
        }
        if($hasPid){
            if(parseInt(t.val()) == 0){
                $(‘#s-‘+ pid).remove();
            }else{
                $(‘#s-‘+ pid).find(‘input[type="text"]‘).val(parseInt(t.val()));
            }
        }
        setTotal();
    });
    $(‘#orderList .plus‘).on(‘click‘,function(e){
        e.preventDefault();
        var t = $(this).parent().find(‘input[type="text"]‘)
            ,tit = $(this).parents(‘li‘).find(‘h2 > a‘).html()
            ,price = $(this).parents(‘li‘).find(‘span.order-price > i‘).html()
            ,pid = $(this).parents(‘li‘).attr(‘id‘)
            ,index = $(this).parents(‘.swiper-slide‘).index()
            ,catid = $(‘.swiper-nav‘).find(‘.swiper-slide‘).eq(index).data(‘catid‘)
            ,cattit = $(‘.swiper-nav‘).find(‘.swiper-slide‘).eq(index).find(‘.title‘).html()
            ,$hasPid = $("#selectList").has(‘#s-‘+ pid).length;
        t.val(parseInt(t.val())+1);
        if($hasPid){
            $(‘#s-‘+ pid).find(‘input[type="text"]‘).val(parseInt(t.val()));
        }else{
            var _html = ‘<li id="s-‘+pid+‘">‘+
                ‘<a href="#" class="tit">【‘+cattit+‘】‘+tit+‘</a><span class="order-price pull-right">¥<i>‘+price+‘</i></span>‘+
                ‘<div class="clearfix selected-btm">‘+
                ‘<a href="#" class="icon-del"></a>&nbsp;&nbsp;&nbsp;&nbsp;‘+
                ‘<div class="order-amount pull-right">‘+
                ‘<a href="#" class="minus"></a>‘+
                ‘<input type="text" value="‘+parseInt(t.val())+‘">‘+
                ‘<a href="#" class="plus"></a>‘+
                ‘</div>‘+
                ‘</div>‘+
                ‘</li>‘;
            $("#selectList ul").append(_html);
        }
        setTotal();
    });

    $(‘#selectList‘).on(‘click‘,‘.plus‘,function(e){
        e.preventDefault();
        var $this = $(this)
            ,$parentLi = $this.parents(‘li‘)
            ,$pid = $parentLi.attr(‘id‘).replace(‘s-‘,‘‘);
        var t = $this.parent().find(‘input[type="text"]‘);
        t.val(parseInt(t.val())+1);
        $(‘#‘+$pid).find(‘input[type="text"]‘).val(t.val());
        setTotal();
    });
    $(‘#selectList‘).on(‘click‘,‘.minus‘,function(e){
        e.preventDefault();
        var $this = $(this)
            ,$parentLi = $this.parents(‘li‘)
            ,$pid = $parentLi.attr(‘id‘).replace(‘s-‘,‘‘);
        var t = $this.parent().find(‘input[type="text"]‘);
        if(parseInt(t.val()) == 1){
            $this.addClass(‘disable‘);
            return false;
        }
        t.val(parseInt(t.val())-1);
        $(‘#‘+$pid).find(‘input[type="text"]‘).val(t.val());
        setTotal();
    });
    $(‘#selectList‘).on(‘click‘,‘.icon-del‘,function(e){
        e.preventDefault();
        var $this = $(this)
            ,$parentLi = $this.parents(‘li‘)
            ,$pid = $parentLi.attr(‘id‘).replace(‘s-‘,‘‘);
        $parentLi.remove();
        $(‘#‘+$pid).find(‘input[type="text"]‘).val(0);
        setTotal();
    });

    function setTotal(){
        var moneyTotal = 0, numTotal = 0;
        var date = new Date();
        date.setTime(date.getTime() + (1 * 24 * 60 * 60 * 1000));
        $("#orderList li").each(function(){
            var $this = $(this)
                ,numVal = $this.find(‘input[type="text"]‘).val()
                ,pid = $this.attr(‘id‘);
            if ( numVal > 0) {
                moneyTotal += parseInt(numVal)*parseFloat($(this).find(‘span.order-price>i‘).text());
                numTotal += parseInt(numVal);

                $.cookie(pid,numVal,{path:path,expires:date});
                $.cookie(‘mTotal‘,moneyTotal,{path:path,expires:date});
                $.cookie(‘nTotal‘,numTotal,{path:path,expires:date});
            }else {
                $.cookie(pid,null,{ path: path,expires:-1});
            }
        });

        if($("#selectList ul li").length == 0){
            $("#selectList").hide();
        }else{
            $("#selectList").show();
        }
        $("#moneyTotal").html(moneyTotal.toFixed(2));
        $("#numTotal").html(numTotal);
        $("#moneyTotal2").html(moneyTotal.toFixed(2));
        $("#numTotal2").html(numTotal);
    }
时间: 2024-10-22 13:19:04

购物车数量加减代码的相关文章

js jquery 权限单选 bug修改以及正确代码 购物车数量加减

效果图废话不多直接上代码 用的avalon渲染,其实都是一样的 <div class="shop-arithmetic"> <a href="javascript:;" class="minus" onclick="delpubls(this)">-</a> <input type="number" style="min-height: 20px;font

jquery实现购物车数量加减,价格计算功能

HTML代码: <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1">     <meta http-equiv="X-UA-Co

静态页面购物车数量加减功能实现

1.进行"加"的效果时:一定要注意:获取单价和数量是禁止使用id或者class选择器,要使用add的选择器去寻找单价和数量的值 HTML: <div class="col-xs-7"> <p>什锦小郡肝套餐</p> <p style="height: 90px"></p> <p style="color: red;font-size: 45px;"> &l

购物车商品数量加减

<span class="cut ">-</span>                <input class="number" type="text" value="1">     <span class="add">+</span> <script>/*购物车商品数量加减*/$(function(){           $(&qu

jQuery实现购物车数字加减效果

效果图: jQuery实现购物车数字加减效果,方法本简单. 经常会写到购物车这块,而购物车很多就有加减这个效果(可以将HTML代码复制多个,同时支持),小小的总结了一下,代码如下: HTML: <div class="gw_num"> <em class="jian">-</em> <input type="text" value="1" class="num"/&

在axure中实现商品数量加减效果,原型库网站讲师-金乌 解答同学问

有同学在群里提问,如何使用axure制作商品数量增加减少效果,见GIF图.虽然属于初级教程,但很多同学还是小白新手阶段,所以特地录制了详细的视频讲解,供大家学习参考! 该教程由原型库网站录制http://www.yuanxingku.com转载请注明出处! 在axure中实现商品数量加减效果,原型库网站讲师-金乌 解答同学问,布布扣,bubuko.com

jquery实现文本框数量加减功能的例子分享

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

自己动手丰衣足食之 jQuery 数量加减插件

引言 做一个手机端的订单相关项目中,其中下订单时需要用到数量加减的控件,可以设置默认值,也可以设置最大值和最小值.使用jQuery这么长时间了,平时很少去编写属于自己的插件,现在编写的时候对立面的一些原理还不是很懂,比如说插件函数入口.插件内如何编写私有函数.如何调用含参私有函数.如果在使用插件时提示参数.都还需要一一去摸索. jQuery实现方式 1.类级别插件开发. $.ajax(). 2.对象级别插件开发.  $("div").highlight(). 3.jquery UI提供

购物车jquery数量加减+总价计算

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>购物车结算</title> <meta name="description&quo