jQuery外卖订餐购物车_js仿美团外卖购物车
2017-07-25 13:40:36  By: dwtedx

分享一个jQuery外卖订餐购物车代码、Demo是一款仿美团外卖APP的订餐系统代码、代码是用网页实现的、适用于Web App的、同事也可以快速集成到Android和IOS断的、效果图如下

仿美团外卖购物车


加的效果

$(".add").click(function () {  
    $(this).prevAll().css("display", "inline-block");  
    var n = $(this).prev().text();  
    var num = parseInt(n)   1;  
    if (num == 0) { return; }  
    $(this).prev().text(num);  
    var danjia = $(this).next().text();//获取单价  
    var a = $("#totalpriceshow").html();//获取当前所选总价  
    $("#totalpriceshow").html((a * 1   danjia * 1).toFixed(2));//计算当前所选总价  
      
    var nm = $("#totalcountshow").html();//获取数量  
    $("#totalcountshow").html(nm*1 1);  
    jss();//<span style=´font-family: Arial, Helvetica, sans-serif;´></span>   改变按钮样式
}); 


减的效果
$(".minus").click(function () {  
    var n = $(this).next().text();  
    var num = parseInt(n) - 1;  

    $(this).next().text(num);//减1  

    var danjia = $(this).nextAll(".price").text();//获取单价  
    var a = $("#totalpriceshow").html();//获取当前所选总价  
    $("#totalpriceshow").html((a * 1 - danjia * 1).toFixed(2));//计算当前所选总价  
     
    var nm = $("#totalcountshow").html();//获取数量  
    $("#totalcountshow").html(nm * 1 - 1);  
    //如果数量小于或等于0则隐藏减号和数量  
    if (num <= 0) {  
        $(this).next().css("display", "none");  
        $(this).css("display", "none");  
        jss();//改变按钮样式  
         return  
    }  
});


选项卡效果

function jss() {  
    var m = $("#totalcountshow").html();  
    if (m > 0) {  
        $(".right").find("a").removeClass("disable");  
    } else {  
       $(".right").find("a").addClass("disable");  
    }  
};
//选项卡
$(".con>div").hide();
$(".con>div:eq(0)").show();    

$(".left-menu li").click(function(){
    $(this).addClass("active").siblings().removeClass("active");
    var n = $(".left-menu li").index(this);
    $(".left-menu li").index(this);
    $(".con>div").hide();
    $(".con>div:eq(" n ")").show();    
});


jQuery外卖订餐购物车源代码下载链接: 仿美团外卖购物车 密码: uc1m

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+