jquery制作的移动端购物车效果完整示例

2023-07-31 17:46:04 75

$(function(){ $(".mrnus").click(function(){ shopAdd($(this)); che(); }) $(".add").click(function(){ shopAdd($(this)); che(); }) $(".checks").click(function(){ checked($(this)); che(); }) $("#quan").click(function(){ quan(); }) }) functionshopAdd(obj){ //console.log(obj) if(obj.html()=="+"){ //alert("jia") letnum=parseInt(obj.prev().html()); num++; obj.prev().html(num); //改变价格 //判断是否选中 if(obj.parent().parent().parent().parent().parent().parent().parent().find(".checks").html()!=""){ letpricr=parseInt(obj.parent().prev().find(".mon").html()); //console.log(pricr); letmoney=parseInt($("#money").html()); money+=pricr; //console.log(price) $("#money").html(money); } }elseif(obj.html()=="-"){ //alert("j") letnum=parseInt(obj.next().html()); num--; if(num<=0){ num=0; //return; } obj.next().html(num); //改变价格 //判断是否选中 if(obj.parent().parent().parent().parent().parent().parent().parent().find(".checks").html()!=""){ letprice2=parseInt(obj.parent().prev().find(".mon").html()); //console.log(pricr); letmoney=parseInt($("#money").html()); money-=price2; //console.log(price) $("#money").html(money); } } } //选择 functionchecked(checks){ //console.log(checks.html()) if(checks.html()==""){ checks.css({"background":"red"}) checks.html("√"); money(checks); }else{ checks.css("background","white") checks.html(""); money(checks,1); } } functionmoney(obj,x){ //alert(obj) letprice=parseInt(obj.parent().parent().find(".mon").html()); letcontent=parseInt(obj.parent().next().find(".cont").html()); //console.log(content) if(x!=null){ price*=-1; } letmoney=parseInt($("#money").html()); money+=price*content; //console.log(price) $("#money").html(money); } functionche(){ letches=$(".checks"); //console.log(ches.size()) } functionquan(){ if($("#quan").attr("index")==0){ $("#quan").attr("index","1") $(".checks").css({"background":"red"}) $(".checks").html("√"); $("#quan").css({"background":"red"}) $("#quan").html("√"); $(".btnspan").html("11") }else{ $("#quan").attr("index","0") $(".checks").css({"background":"white"}) $(".checks").html(""); $("#quan").css({"background":"white"}) $("#quan").html(""); $(".btnspan").html("0") } }

@charset"utf-8"; *{ margin:0; padding:0; } html{ font-size:22.67vw; /*font-family:"黑体";*/ } html,body{ height:100%; background-color:#f4f4f4; } body{ height:100%; background-color:#f4f4f4; font-family:"微软雅黑"; display:-webkit-flex; flex-direction:column; } a{ text-decoration:none; } ul,ol{ list-style:none; } img{ border:0; display:block; } header{ background:#fff9eb; height:0.4rem; font-size:12px; padding-left:.1rem; display:flex; align-items:center; border-bottom:1pxsolid#ffd6a0; } headerh3{ font-weight:normal; } headerh3span{ color:#ff695a; } /*main--------------------------*/ .main{ display:flex; flex:1; overflow:auto; margin-top:.1rem; background:#ffffff; } .main_shop{ width:100%; flex-direction:column; } .shop_list{ width:100%; height:1.3rem; border-bottom:1pxsolid#dddddd; display:flex; justify-content:space-between; align-items:center; } .checked{ width:10%; height:100%; } .checkeddiv{ width:0.17rem; height:0.17rem; border:1pxsolid#cdcdcd; border-radius:50%; margin-top:.43rem; margin-left:.1rem; font-size:12px; color:white; text-align:center; line-height:.17rem; } .content{ flex:1; height:100%; } .content_top{ width:100%; height:1rem; display:flex; } .img,img{ width:.75rem; height:100%; } .text{ flex:1; height:100%; font-size:12px; padding-right:.16rem; padding-left:.15rem; } .tit{ display:flex; align-items:center; justify-content:space-between; height:.38rem; } .titp{ font-size:.15rem; color:#333333; } .titdiv{ width:.15rem; height:.17rem; background:url("shop/remove.jpg"); background-size:cover; } .down{ height:0.17rem; width:0.41rem; color:#11b57c; border:2pxsolid#11b57c; border-radius:.08rem; text-align:center; line-height:.17rem; margin-top:.11rem; } .price{ display:flex; height:.3rem; align-items:center; justify-content:space-between; font-size:.12rem; font-weight:900; } .price_leftspan:first-child{ color:#ff695a; display:inline-block; margin-right:5px; } .mon{ color:#ff695a; display:inline-block; margin-right:5px; } .price_leftspan:last-child{ color:#cecece; } .price_right{ display:flex; justify-content:space-around; align-items:center; width:.77rem; height:.22rem; border:1pxsolid#dddddd; border-radius:5px; } .price_rightdiv{ flex:1; text-align:center; } .price_rightdiv:nth-child(2){ border-right:1pxsolid#dddddd; border-left:1pxsolid#dddddd; } .content_bottom{ width:100%; height:.3rem; border-top:1pxsolid#dddddd; display:flex; justify-content:flex-start; align-items:center; } .content_bottomp{ font-size:.13rem; color:#808080; font-weight:800; } .content_bottompspan{ font-size:.13rem; color:#cccccc; padding-left:10px; } /*car*/ .car{ height:0.48rem; width:100%; border-top:1pxsolid#d5d5d5; background:#fff; display:flex; justify-content:space-between; align-items:center; font-size:12px; } .car_left{ height:100%; display:flex; align-items:center; } .car_leftdiv{ width:0.17rem; height:0.17rem; border:1pxsolid#cdcdcd; border-radius:50%; margin-left:.1rem; text-align:center; line-height:.17rem; margin-right:10px; } .car_right{ display:flex; justify-content:space-between; align-items:center; height:100%; } .tep:first-child{ font-size:12px; font-weight:900; } .tep:first-childspan{ color:#ff6353; } .btn{ width:1.1rem; height:100%; background:#ff6353; color:white; font-size:.17rem; text-align:center; line-height:.5rem; } .tep:last-childspan{ color:#999999; } /*footer999999*/ footer{ height:0.48rem; width:100%; border-top:2pxsolid#d5d5d5; background:#fff; } footerul{ display:flex; justify-content:space-around; align-items:center; margin-top:6px; } footerulli{ font-size:12px; color:#8d8a8a; } footerulliimg{ width:0.25rem; height:0.22rem; }

jquery制作的移动端购物车效果完整示例

全场满100元包邮,还差100元包邮

随机推荐

jquery制作的移动端购物车效果完整示例

热门推荐

随机推荐