购物车的简化版

function $(selector){
       return document.querySelector(selector);
}
function ssr(tagName,className){
	var node=document.createElement(tagName);
	node.className=className;
	return node;
}

var sus=0;
for(var i=0;i<shop.data.length;i++){
	var shopItem=ssr("div","shopItem");

	// 1.放图片	
	//创建图片节点
	var pic = new Image();
	//将数据库中的图片路径放入图片节点
	pic.src=shop.data[i].pic;
	//把子节点数据放入父元素节点内部
	shopItem.appendChild(pic);

	// 2.放标题
	// 创建div节点并命名class属性
	var title=ssr("div","title");
	//讲数据库中的文本放入title数据节点中
	title.textContent=shop.data[i].tatle;
	// 把子节点数据放入父元素节点内部
	shopItem.appendChild(title);

	// 3.放单价
	// 创建div节点并命名class属性
	var univalence=ssr("div","price");
	//讲数据库中的文本放入price数据节点中
	univalence.textContent="￥"+shop.data[i].univalence;
	// 把子节点数据放入父元素节点内部
	shopItem.appendChild(univalence);
	// 4.放购买数量 购买数量决定商品价格
	// 创建div节点并命名class属性
	var count=ssr("div","count");
	//建立一个input节点
	var inp=document.createElement("input");
	     //为建立的input节点设置属性
		inp.setAttribute("type","number");
		//为value设置属性
		inp.setAttribute("value",shop.data[i].count);
		//设置input的类名属性
		inp.setAttribute("class","numInp");
		//将input数据放入父元素count
		count.appendChild(inp);
		//将count的数据放入shopItem
	shopItem.appendChild(count);
	// 5.放总价  等与商品单价乘数量
	// 创建div节点并命名class属性
	var price=ssr("div","totalPrice");
	//将数据库中的价格放入price
	price.textContent="￥"+shop.data[i].price
	//将div中的文本内容放入shopItem
	shopItem.appendChild(price);
	//最后将所有的商品信息放入shop
	$(".shop").appendChild(shopItem);
	//由于商品单价有小数所以我们需要将数字取整然后再将保留小数后两位
	sus=sus+parseInt(shop.data[i].price*100)/100;
}
//将数字放入物品的单价节点中
$(".ccr span").textContent="￥"+sus;




//当商品单价发生变化时所有商品的合计总价同时发生变化
//寻找到页面中的input
$(".shop").addEventListener("input",function(){
	//判断当前的是不是input
	if(event.target.tagName.toLowerCase()==="input"){
		//定义变量为event.target是当前的input type="numer"
	var tst=event.target
	//寻找input的父元素的上级元素并且将他进行截取
	var ss=event.target.parentElement.previousElementSibling.textContent.slice(1);
	//获取他的文本中的商品数量
	var sr=event.target.value
	//获得商品的价格运用商品数量乘商品单价
	var ter=sr*parseInt(ss*100)/100;
	//将商品的价格放入input的父元素的同级元素之中
	tst.parentElement.nextElementSibling.textContent="￥"+ter;
	
//所买商品的总价
	//定义变量，作用为所有商品总价做一个承接
	var sse=0;
	//利用for循环去寻找页面中有多少个商品单价的元素并进行循环
		for(var i=0;i<document.getElementsByClassName("totalPrice").length;i++){
			//当i等于零时与sse相加依次类推直到加到document.getElementsByClassName("totalPrice").length
			sse=sse+parseInt(document.getElementsByClassName("totalPrice")[i].textContent.slice(1)*100)/100;
		}
		//将数据放入合计中
		$(".ccr span").textContent="￥"+parseInt(sse*100)/100;
	}

})