购物车功能开发（10月份工作图文）

水到家手机项目首页的难点是购物车功能，比如说当数量是0的时候，减号自动隐藏，当数量超过0的时候，减号自动显示；底部购物车下方的红色是总数量，比如说单击加号的时候，下方的数量有数字等。

一、购物车功能效果图

当数量是0的时候，减号自动隐藏

index.html：

增加display:none为隐藏

//购物车列表减号
<em class="mui-btn mui-numbox-btn-minus" style="display:none">-</em>

function jiaZai(brand_id) {
    if (flag) {
        tempData += '<em class="mui-btn mui-numbox-btn-minus">-</em>' +
            '<input class="mui-numbox-input numBox" type="number" value="' + productlist[j].num + '" readonly="readonly" />' +
            '<em class="mui-btn mui-numbox-btn-plus">+</em>' +
            '<input type="hidden" value="' + productlist[j].num + '" class="goods_totalPrice" />';

    } else {

        tempData += '<em class="mui-btn mui-numbox-btn-minus" style="display:none">-</em>' +
            '<input class="mui-numbox-input numBox" type="number" value="" readonly="readonly" />' +
            '<em class="mui-btn mui-numbox-btn-plus">+</em>' +
            '<input type="hidden" value="0" class="goods_totalPrice" />';
    }
} else {
    tempData += '<em class="mui-btn mui-numbox-btn-minus" style="display:none">-</em>' +
        '<input class="mui-numbox-input numBox" type="number" value="" readonly="readonly" />' +
        '<em class="mui-btn mui-numbox-btn-plus">+</em>' +
        '<input type="hidden" value="0" class="goods_totalPrice" />';
}
}

 //定义更改购物的减少商品
function reduceCartNum(obj, num) {
    if (goods_num == 0) {
        obj.parent().parent().find(".mui-numbox-btn-minus").hide();
    }
}

总数量等于或者大于0就判断减号的显示与隐藏方法

如果数量是0的时候，刷新之后减号默认隐藏，设置.mui-btn元素增加display:none 为默认隐藏

如果数量是大于0的时候，刷新之后减号就显示，设置.mui-btn元素增加display:none 为默认显示

$("#bottomCartNum").bind('DOMNodeInserted', function() {
    if ($(this).html() != 0) {
        $(this).css({
            'background-color': '#D44444',
            'color': '#fff'
        });
        $(".mui-bar-tabs").find(".mui-btn").css('display', 'block');
    } else {
        $(".mui-bar-tabs").find(".mui-btn").css('display', 'none');
    }
})

点击加号的时候，如果底部购物车的红色小圆大于0，设置为显示show();

$("#goods_list").on("click", ".mui-numbox-btn-plus", function(event) {
            $("#bottomCartNum").show();
        }

点击减号的时候，如果红色小圆为0，设置.buttons元素的结算按钮就隐藏hide();

//定义更改购物的减少商品
function reduceCartNum(obj, num) {
    if (cartdata.totalNumber == 0) {
        //  $(".mui-barss").hide(); //如果0的话，购物车就自动隐藏
        $(".buttons").hide();
        $("#bottomCartNum").html(cartdata.totalNumber).hide();
    }
}

弹出购物车事件：

单击减号事件：

当数量等于0的时候，设置.mui-numbox-btn-minus元素加上display:none时隐藏；

当数量大于0的时候，设置.mui-numbox-btn-minus元素加上display:block时显示；

//定义更改购物的
function reducePopCartNum(obj, num) {
    if (goods_num == 0) {
        tempObj.find(".mui-numbox-btn-minus").css('display', 'none');
        tempObj.find(".numBox").css('display', 'none');
    } else {
        tempObj.find(".numBox").val(goods_num);
    }
}

单击加号事件：

当数量等于0的时候，设置.mui-numbox-btn-minus元素加上display:none时隐藏；

//定义加事件
function addPopCartNum(obj, num) {
    if (goods_num == 0) {
        tempObj.find(".mui-numbox-btn-minus").css('display', 'none');
        tempObj.find(".numBox").css('display', 'none');
    } else {
        tempObj.find(".numBox").val(goods_num);
    }
}

商品列表页的数量和弹出购物车中的列表是同步:

弹出减号事件：

修改一下：var tempObj = $("li[goods_id="+goods_id+"]") ;如果数量大于0的时候，商品列表中的减号与加号之间数字：设置为.numBox加上 tempObj.find(".numBox").val(goods_num);

//定义更改购物的
function reducePopCartNum(obj, num) {
    var tempObj = $("li[goods_id=" + goods_id + "]");
    if (goods_num == 0) {
        tempObj.find(".mui-numbox-btn-minus").css('display', 'none');
        tempObj.find(".numBox").css('display', 'none');
    } else {
        tempObj.find(".numBox").val(goods_num);
    }
}

弹出加号事件：弹出减号做法是一样的。