购物车

最新推荐文章于 2024-09-14 19:55:48 发布

weixin_34221276

最新推荐文章于 2024-09-14 19:55:48 发布

阅读量65

点赞数

文章标签： python json

原文链接：https://my.oschina.net/u/2991733/blog/815695

版权

2019独角兽企业重金招聘Python工程师标准>>>

绑定动态创建得到数据

		
					//添加一个商品
			$("#tab").on("click",".add",function(){
				var num=$(this).next(); //数量
				var parent=$(this).parent().parent().parent();//找当前父元素tr；
				var price=parent.find(".price");
				var price_s=parent.find(".price_s");//金额<span>中
				var out_of_pocket=parent.find(".out_of_pocket"); //实付金额
				var discount=parent.find(".discount"); //折扣
				
				var add_p=new Add_p(num,price,price_s,discount,out_of_pocket);
				//数量单价金额总价
				add_p.addChange();

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.1.1.min.js"></script>
		<style>
			#tab{border-collapse: collapse;}
			.num{ width: 20px; text-align: center;}
		</style>
		<script>
			$(document).ready(function(){
			
			function addtd(tr,obj){
				var td=$("<td></td>");// 创建一列
					td.append(obj);
					tr.append(td);
				}
			
				$.ajax({
					type:"get",
					url:"json/Mcatalog.json",
					async:true,
					success:function(data,u){
						var arr=eval(data);//取数据
						var tab=$("#tab tbody");//获取
						for(var i=0;i<arr.length;i++){
							var tre=$("<tr></tr>");//创建一行
							
							//图片
							var commodity=$('<img src='+arr[i].src+'>');
							addtd(tre,commodity);
							
							//描述
							var describe=arr[i].pname;
							addtd(tre,describe);
							
							//加
							var span=$("<span></span>")
							var add=$("<button class='add'>+</button>");
							//num
							var num=$("<input type='text' value='"+arr[i].num+"' class='num' />");
							//减
							var minus=$("<button class='minus'>-</button>");
							span.append(add);
							span.append(num);
							span.append(minus);
							addtd(tre,span);
							
							//单价
							var price="¥"+"<span class='price'>"+arr[i].price+"</span>";
							addtd(tre,price);
							
							//金额
							var num=num.val(); //数量
							var price_s=num*arr[i].price;
							var price_sin="¥"+"<span class='price_s'>"+price_s+"</span>"
							addtd(tre,price_sin);
							
							//优惠
							var discount=arr[i].discount;
							var discount_in="¥"+"<span class='discount'>"+discount+"</span>";
							addtd(tre,discount_in);
							
							//实额
							var out_of_pocket=price_s-discount;
							var out_of_pocket_in="¥"+"<span class='out_of_pocket'>"+out_of_pocket+"</span>";
							addtd(tre,out_of_pocket_in);
							
							//删除
							var delete_this="<a class='delete_this'>删除</a>";
							addtd(tre,delete_this);
							tab.append(tre);//行加
							
						}//for
						
						var obj_span=$(".out_of_pocket")
						var price_span=new Price(obj_span);
						price_span.priceShow();
						totalclass();
					}//success
					
				});//ajax
				
					//添加一个商品
			$("#tab").on("click",".add",function(){
				var num=$(this).next(); //数量
				var parent=$(this).parent().parent().parent();//找当前父元素tr；
				var price=parent.find(".price");
				var price_s=parent.find(".price_s");//金额<span>中
				var out_of_pocket=parent.find(".out_of_pocket"); //实付金额
				var discount=parent.find(".discount"); //折扣
				
				var add_p=new Add_p(num,price,price_s,discount,out_of_pocket);
				//数量单价金额总价
				add_p.addChange();
				
			})
			
			//减少一个商品
			$("#tab").on("click",".minus",function(){
				var num=$(this).prev(); //数量
				var parent=$(this).parent().parent().parent();//找当前父元素tr；
				var price=parent.find(".price");
				var price_s=parent.find(".price_s");//金额<span>中
				var out_of_pocket=parent.find(".out_of_pocket"); //实付金额
				var discount=parent.find(".discount"); //折扣
				
				var add_p=new Add_p(num,price,price_s,discount,out_of_pocket);
				//数量单价金额总价
				add_p.minusChange();
				
			})
			
				//删除
			$("#tab").on("click",".delete_this",function(){
					$(this).parent().parent().remove();
					totalclass();
					var obj_span=$(".out_of_pocket")
					var	price_span=new Price(obj_span);
					price_span.priceShow();
			})
			
			
		})//ready
			
			//显示总价
			function Price(obj){
				this.obj=obj;
			}
			
			Price.prototype.priceShow=function(){
				var sum=0;
				for(var i=0;i<this.obj.length;i++){
					sum+=parseFloat(this.obj[i].innerHTML);
				}
				
				$(".price_show").text(sum);
			}
			
			//商品数量改变
			function Add_p(num_obj,price,price_s_obj,discount,out_of_pocket_obj){
				this.num=num_obj;//数量
				this.price=price;//单价
				this.price_s=price_s_obj; //金额
				this.discount=discount;//折扣
				this.out_of_pocket=out_of_pocket_obj; //总价
				
			}
			
			//加一个
			Add_p.prototype.addChange=function(){
				var num=this.num.val();
				var price=this.price.text();
				var price_s=this.price_s.text();
				var discount=this.discount.text();
				num++;
				this.num.val(num); //赋值
				
				var price_change=price*num;
				this.price_s.text(price_change); //金额
				
				var discount=this.discount.text();//折扣
				var out_of_pocket=price_change-discount;
				this.out_of_pocket.text(out_of_pocket);//实付
				
				var obj_span=$(".out_of_pocket")
				var	price_span=new Price(obj_span);
				price_span.priceShow();//span_show重新计算总价
			}
			//减一个
			Add_p.prototype.minusChange=function(){
					var num=this.num.val();
					var price=this.price.text();
					var price_s=this.price_s.text();
					var discount=this.discount.text();
					num--;
					if(num>=0){
					this.num.val(num); //赋值
					
					var price_change=price*num;
					this.price_s.text(price_change); //金额
					
					var discount=this.discount.text();//折扣
					var out_of_pocket=price_change-discount;//实付金额
					if(out_of_pocket< 0){
						out_of_pocket=0;
					}
					this.out_of_pocket.text(out_of_pocket);//实付
					
				    var obj_span=$(".out_of_pocket")
					var price_span=new Price(obj_span);
					price_span.priceShow();//span_show重新计算总价
				}
			}
			
				
			//商品件数
			function totalclass(){
				var num=$("tbody tr");
				$(".totalclass").text(num.length);
			}
				
		</script>
	</head>
	<body>
	</body>
	<span>购物车(<span class="totalclass"></span>)</span>
		<table id="tab" border="1px" cellpadding="4px">
			<thead>
				<tr>
					<td>商品</td>
					<td>描述</td>
					<td>数量</td>
					<td>单价</td>
					<td>金额</td>
					<td>优惠</td>
					<td>实额</td>
					<td>操作</td>
				</tr>
			</thead>
			<tbody>
				
			</tbody>
		</table>
		总价：<span class="price_show"></span>
</html>

转载于:https://my.oschina.net/u/2991733/blog/815695