标签：nums demo price display 购物车 简易 html var find
一、图片
二、HTML部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="./css/aui.css">
<link rel="stylesheet" href="css/classify.css">
<style>
html,body{height: 100%;max-width: 640px;margin:0 auto;}
.aui-bar-nav{border:none;background: #f5f5f5;}
.main{height: calc(100% - 4.5rem);}
#tab1-con1{padding-bottom: 3rem;}
#tab1-con1,#tab1-con2{height: 100%;}
.aui-tab{border-bottom: solid 1px #eee;background: #f5f5f5;height: 2.25rem;}
.aui-tab-item{font-size: .75rem;color: #666;width: 25%;}
.aui-tab-item.aui-active{border:none;color: #000;position: relative;}
.aui-tab-item.aui-active:after{position: absolute;left: 40%;width: 20%;height: 2px;background: #00ae66;content: '';bottom:0;}
.list-content .food img{float: left; width:6%;height: 60px;}
</style>
<script src="./js/new_file.js" type="text/javascript"></script>
</head>
<body>
<header class="aui-bar aui-bar-nav">
<a class="aui-pull-left aui-btn">
<!-- <span class="aui-iconfont aui-icon-left"></span> -->
</a>
<div class="aui-title">商品</div>
<div class="aui-pull-right"></div>
</header>
<div class="aui-tab" id="tab">
<div class="aui-tab-item aui-active">点菜</div>
</div>
<div class="main">
<div class="aui-item" id="tab1-con1">
<div class="left-menu" id="left">
<ul>
<li><span>营养套餐</span></li>
</ul>
</div>
<div class="con">
<div class="right-con con-active" style="display: inline-block;">
<ul>
</ul>
</div>
</div>
<div class="up1"></div>
<div class="shopcart-list fold-transition">
<div class="list-header">
<h1 class="title">购物车</h1>
<span class="empty">清空所有</span>
</div>
<div class="list-content">
<ul>
</ul>
</div>
</div>
<div class="footer">
<div class="left">
<div class="count_num"><span id="totalcountshow">0</span></div>
<span id="cartN" class="nowrap">总计：<span id="totalpriceshow">0</span>元</span>
</div>
<div class="right">
<a id="btnselect" class="xhlbtn disable">去结算</a>
</div>
</div>
</div>
</div>
<script src="./js/shopping_script.js" type="text/javascript"></script>
</body>
</html>
三、JS部分
var menuData=[
{img:"img/menu002.jpg",name:"珍珠奶茶",sales:"123",price:"2.00",num:0},
{img:"img/menu003.jpeg",name:"辣子鸡",sales:"258",price:"10.00",num:0},
{img:"img/menu004.jpeg",name:"红烧肉",sales:"365",price:"15.00",num:0},
{img:"img/menu005.jpeg",name:"水煮鱼",sales:"688",price:"45.00",num:0}
];//json 数据
var menu='';
/*
将数据拼串渲染到页面上
*/
for(var i=0; i<menuData.length;i++){//遍历数据
menu+='<li><div class="menu-img"><img src='+menuData[i].img;
menu+='></div><div class="menu-txt"><h4 data-icon="01" class="menu_name">'+menuData[i].name;
menu+='</h4><p class="list1">月销量：'+menuData[i].sales;
menu+='</p><p class="list2"><b>￥</b><b>'+menuData[i].price;
menu+='</b></p><div class="btn"><button class="minus"></button><i>'+menuData[i].num;
menu+='</i><button class="add"></button></div></div></li>'
$('.con>.right-con>ul').append(menu);//添加到标签了
menu='';
}
$(".add").click(function(){//商品的数量加
cont(this,1);//调用cont方法
var price=$(this).parent().parent().find(".list2>b:last").html();//获取页面数据
price=parseFloat(price);
total(1,price);
var menuName=$(this).parent().parent().children("h4").html();
var nums=parseInt($(this).prev().html());
shoppingCar(menuName,nums);
})
$(".minus").click(function(){//减
cont(this,-1);
var price=$(this).parent().parent().find(".list2>b:last").html();
price=-parseFloat(price);
total(-1,price);
var menuName=$(this).parent().parent().children("h4").html();
var nums=parseInt($(this).next().html());
shoppingCar(menuName,nums);
})
function cont(thiss,numbers){//传入商品加减按钮this,传入大于1加小于1减判断加或减
if(numbers>=1){
var nums=parseInt($(thiss).prev().html());
nums=nums+1;
$(thiss).prev().html(nums);
}else{
var nums=parseInt($(thiss).next().html());
nums=nums-1;
$(thiss).next().html(nums);
}
if(nums>0){
$(thiss).prev().css("display","inline-block");
$(thiss).prev().prev().css("display","inline-block");
}else{
$(thiss).next().css("display","none");
$(thiss).css("display","none");
}
console.log(numbers);
}
function total(numbers,price){//传入数量+/-1 传入商品单价 计算总数和总价
$("#totalcountshow").text(parseInt($("#totalcountshow").text())+numbers*1);
$("#totalpriceshow").text((parseFloat($("#totalpriceshow").text())+price*1).toFixed(2));
if(parseInt($("#totalcountshow").text())<=0){
$(".xhlbtn").addClass("disable");
}else{
$(".xhlbtn").removeClass("disable");
}
}
//购物内容更改
function shoppingCar(menuName,nums){
var indexs=0;
$(menuData).each(function(index){
if(menuData[index].name==menuName){
indexs=index;
return false;
}
})
var shopping='';
if($(".list-content ul li").find(".accountName").get(0)==undefined&&nums>=1)
{
shopping+='<li class="food"><img src='+menuData[indexs].img;
shopping+=' ><div><span class="accountName">'+menuData[indexs].name;
shopping+='</span></div><div><span>￥</span><span class="accountPrice">'+(parseFloat(menuData[indexs].price)*nums).toFixed(2);
shopping+='</span></div><div class="btn"><button class="ms2" style="display: inline-block;"></button><i class="li_acount">'+nums;
shopping+='</i><button class="ad2"></button></div>';
$(".list-content ul").append(shopping);
shopping='';
}else{
var flag=false;
$(".list-content ul li").each(function(){
if($(this).find('.accountName').html()==menuName){
$(this).find(".accountPrice").html((parseFloat(menuData[indexs].price)*nums).toFixed(2));
$(this).find(".li_acount").html(nums);
if(nums<=0){
$(this).remove();
}
flag=false;
return false;
}else if(nums>=1){
flag=true;
}
})
if(flag){
shopping+='<li class="food"><img src='+menuData[indexs].img;
shopping+=' ><div><span class="accountName">'+menuData[indexs].name;
shopping+='</span></div><div><span>￥</span><span class="accountPrice">'+(parseFloat(menuData[indexs].price)*nums).toFixed(2);
shopping+='</span></div><div class="btn"><button class="ms2" style="display: inline-block;"></button><i class="li_acount">'+nums;
shopping+='</i><button class="ad2"></button></div>';
$(".list-content ul").append(shopping);
shopping='';
}
if($(".list-content ul li").find(".accountName").get(0)==undefined){
$('.shopcart-list').css("display","none");
$(".up1").css('display','none');
$(".fold-transition").css('display','none');
}
}
}
$(".list-content").on('click','.ad2',function(){ //购物车加
shoppingCont(this,1);
})
$(".list-content").on('click','.ms2',function(){//购物车减
shoppingCont(this,-1);
})
function shoppingCont(thiss,number){//传入购物车加或减按钮的this，传入减或加一的数量
var shoppingName=$(thiss).parent().parent().find('.accountName').html();
$('.con .right-con ul li').each(function(){
if($(this).find('.menu_name').html()==shoppingName){
cont($(this).find(number>=1?'.add':'.minus').get(),1*number);
var price=parseFloat($(this).find(".list2>b:last").html());
total((1*number),(price*number));
var menuName=$(this).find('.menu_name').html();
var nums=parseInt($(this).find('.minus').next().html());
shoppingCar(menuName,nums);
return false;
}
})
}
var fotterFlag=true;
$('.footer>.left').click(function(){//点击购物车显示
if($(".list-content ul li").find(".accountName").get(0)!=undefined&&fotterFlag){
fotterFlag=false;
$('.shopcart-list').css("display","block");
$(".up1").css('display','block');
$(".fold-transition").css('display','block');
}else{
fotterFlag=true;
$('.shopcart-list').css("display","none");
$(".up1").css('display','none');
$(".fold-transition").css('display','none');
}
})
$('.list-header>.empty').click(function(){ //清空购物车
$('.con .right-con ul li').each(function(){
$(this).find(".btn").children('i:first').text(0);
$(this).find(".btn").children('i:first').css("display","none");
$(this).find(".btn").children('.minus:first').css("display","none");
shoppingCar($(this).find('.menu-txt').children('h4').text(),0);
})
$("#totalcountshow").text(0);
$("#totalpriceshow").text(0);
$(".xhlbtn").addClass("disable");
$(".up1").css('display','none');
$(".fold-transition").css('display','none');
})
标签：nums,demo,price,display,购物车,简易,html,var,find 来源： https://blog.csdn.net/FUSJKSL/article/details/120680410
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。