用javascript购物车自动生成列表，修正before在IE中不能正常显示,改用insertBefore

最新推荐文章于 2021-12-09 20:15:36 发布

cdcdhj

最新推荐文章于 2021-12-09 20:15:36 发布

阅读量245

点赞数

分类专栏： javascript学习日记文章标签： javascript js css

本文链接：https://blog.csdn.net/cdcdhj/article/details/111003181

版权

javascript学习日记专栏收录该内容

142 篇文章 0 订阅

订阅专栏

在javascript前端开发实例教程的第七章，用javascript开发购物车，其中before在谷歌和Firefox浏览器中可以正常显示，但是在ＩＥ浏览器中却找不到before对象而数据显示失败，这里改了before为insertBefore就可以正常显示。

先写一个go.html静态页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的购物车</title>
		<style>
			body{font: 16px/1.6em Arial, Helvetica, sans-serif;text-align: left;}
			.cart{border: 1px solid red;width: 600px;}
			.cart-title{background: #008000;width: 100%;height: 25px;color: white;font: 16px/1.6em Arial, Helvetica, sans-serif;font-weight: bold;text-align: center;}
			.cart-table{width: 100%;}
			th{text-align: center;}
			td{text-align: center;padding-top:5px ;padding-bottom: 5px;}
			.cart-bottom td{text-align: right;}
			.cart-bottom span{padding: 5px;}
			.cart-reduce{background-color: #000000;color: white;padding: 2px;}
			.cart-add{background-color: #000000;color: white;padding: 2px;}
			.cart-num{border: 1px solid #CCCCCC; padding: 5px;font-size: 12px;}
			.cart-total-price{color: red;}
		</style>
	</head>
	<body>
		<div class="cart">
			<div class="cart-title">我的购物车</div>
			<table class="cart-table">
				<tr>
					<th><span class="cart-all">全选</span>/<span class="cart-noall">反选</span></th><th>商品</th>
					<th>单价</th><th>数量</th><th>小计</th><th>操作</th>
				</tr>
				<tr class="cart-item">
					<td><input class="cart-check" type="checkbox" checked></td>
					<td><span class="cart-name">Loading...</span></td>
					<td><span class="cart-price">0</span></td>
					<td>
						<span class="cart-reduce">-</span>
						<span class="cart-num">0</span>
						<span class="cart-add">+</span>
					</td>
					<td><span class="cart-subtotal">0</span></td>
					<td><span class="cart-del">删除</span></td>
				</tr>
				<tr class="cart-bottom">
					<td colspan="6">
						<span>已选择<span class="cart-total-num">0</span> 件商品</span>
						<span>总计：<span class="cart-total-price">0</span>元</span>
						<span><input type="button" value="结算"></span>
					</td>
				</tr>
			</table>
		</div>
		<script src="ShopCart.js"></script>
		<script>
			ShopCart('cart',[
				{name:'Javascrpt实战',price:45.8,num:1},
				{name:'PHP基础案例教程',price:49.8,num:2},
				{name:'HTML+CSS网页制作',price:45.2,num:5},
				{name:'Java基础入门',price:45,num:8}
			]);
		</script>
	</body>
</html>

然后编写ShopCart.js的代码

(function(window){
	var ShopCart=function(prefix,defCart){
		Find.prototype.prefix=prefix;
		var cart=new Cart(document.getElementsByClassName(prefix)[0]);
		for(var i in defCart){
			cart.add(defCart[i]);
		}
		cart.updateTotal();
	};
	function Find(obj){
		this.obj=obj;
	}
	Find.prototype.prefix='';
	Find.prototype.className=function(className){
		return this.obj.getElementsByClassName(this.prefix+'-'+className)[0];
	};
	function Cart(obj){
		this.items=[];
		var find=new Find(obj);
		this.all=find.className('all');
		this.noall=find.className('noall')
		this.bottom=find.className('bottom');
		this.num=find.className('total-num');
		this.price=find.className('total-price');
		this.tmp=find.className('item');
		this.tmp.parentNode.removeChild(this.tmp);
		var cart=this;
		this.all.onclick=function(){
			cart.checkAll();
		};
		this.noall.onclick=function(){
			cart.checkNoall();
		};
	}
	Cart.prototype.add=function(data){
		var tmp=this.tmp.cloneNode(true);
		var item= new Item(tmp,data);
		var cart=this;
		var t=cart.bottom.parentNode;　//获取父级节点，方便等会儿调用,插入节点
		
		item.check.onclick=function(){
			cart.updateTotal();
		};
		item.add.onclick=function(){
			item.num.textContent=++item.data.num;
			item.updateSubtotal();
			cart.updateTotal();
		};
		item.reduce.onclick=function(){
			if(item.data.num>1){
				item.num.textContent=--item.data.num;
				item.updateSubtotal();
				cart.updateTotal();
			}else{
				alert('至少选择１件，如果不需要，请直接删除');
			}
		};
		item.del.onclick=function(){
			if(confirm('你确定要删除此商品吗？')){
				tmp.parentNode.removeChild(tmp);
				cart.del(item);
				cart.updateTotal();
			}
		};
		item.updateSubtotal();
		this.items.push(item);
		t.insertBefore(tmp,cart.bottom);　//这里是用的insertBefore来代替before,t是父级节点
	};
	Cart.prototype.updateTotal=function(){
		var num=0,price=0;
		for(var i in this.items){
			var item=this.items[i];
			if(item.check.checked){
				num+=item.data.num;
				price+=item.data.num*item.data.price;
			}
		}
		this.num.textContent=num;
		this.price.textContent=price.toFixed(2);
	};
	Cart.prototype.checkAll=function(){
		for(var i in this.items){
			this.items[i].check.checked=true;
		}
		this.updateTotal();
	};
	Cart.prototype.checkNoall=function(){
		for(var i in this.items){
			this.items[i].check.checked=false;
		}
		this.updateTotal();
	};
	Cart.prototype.del=function(item){
		for(var i in this.items){
			if(this.items[i]===item){
				delete this.items[i];
			}
		}
	};
	function Item(tmp,data){
		var find=new Find(tmp);
		this.check=find.className('check');
		this.name=find.className('name');
		this.price=find.className('price');
		this.num=find.className('num');
		this.add=find.className('add');
		this.reduce=find.className('reduce');
		this.subtotal=find.className('subtotal');
		this.del=find.className('del');
		this.data=data;
		this.name.textContent=data.name;
		this.price.textContent=data.price.toFixed(2);
		this.num.textContent=data.num;
	}
	Item.prototype.updateSubtotal=function(){
		this.subtotal.textContent=(this.data.num*this.data.price).toFixed(2);
	};
	window['ShopCart']=ShopCart;
})(window);