今日书写完成购物车

购物车的一些添加，删除，加减功能：

let cartList = JSON.parse(localStorage.getItem(‘cartList’))

	if (!cartList) {
		alert('您的购物车是空的，快去选购吧')
	} else {
		bindHtml()

		bindEvent()
	}

	function bindHtml() {

		let selectAll = cartList.every(item => {
			return item.isSelect === true
		})


		let str = `
		<div class="top">
			<input class="selectAll" type="checkbox" ${selectAll ? 'checked' : ''}>   全选	
		</div>
		<ul class="center">
			`
		cartList.forEach(item => {
			str += `
			<li>
				<div class="select">
					<input data-id=${ item.goods_id } class="selectOne" type="checkbox" ${item.isSelect ? 'checked' : ''}>
				</div>
				<div class="info">
					<img src="${item.discount_img}" alt="">
					<p>${item.goods_name}</p>
				</div>
				<p class="price">${item.goods_price}</p>
				<div class="number">
					<button class="sub" data-id=${ item.goods_id }>-</button>
					<input type="text" value="${item.number}">
					<button class="add" data-id=${ item.goods_id }>+</button>
				</div>
				<p class="xiaoji">￥:${item.xiaoji}</p>
				<div class="del" data-id=${ item.goods_id }>删除</div>
			</li>
			`
		})	
		

		let selectArr = cartList.filter(item => item.isSelect)
		console.log(selectArr)
		
		let selectNumber = 0
		let selectPrice = 0
		selectArr.forEach(item => {
			selectNumber += item.number
			selectPrice += item.xiaoji
		})

		str +=	`
		</ul>
		<div class="bottom">
			<p>选中商品数量  <span>${selectNumber}</span></p>
			<p>总价:   <span>${selectPrice}</span></p>
			<button class="pay" ${selectArr.length ? '': 'disabled'}>去支付</button>
			<button class="clear">清空购物车</button>
		</div>
		`

		$('.cart').html(str)
	}

	function bindEvent(){
		//全选按钮
		$('.cart').on('change','.selectAll',function(){
			cartList.forEach(item => {
				item.isSelect = this.checked
			})

			bindHtml()

			localStorage.setItem('cartList',JSON.stringify(cartList))
		})
		
		//单选按钮
		$('.cart').on('change','.selectOne',function(){
			console.log($(this).data('id'))
			const id = $(this).data('id')

			cartList.forEach(item => {
				if(item.goods_id === id){
					item.isSelect = !item.isSelect
				}
			})
			bindHtml()

			localStorage.setItem('cartList',JSON.stringify(cartList))
		})

		//减少商品数量
		$('.cart').on('click','.sub',function(){
			const id = $(this).data('id')

			cartList.forEach(item => {
				if(item.goods_id === id){
					item.number > 1 ? item.number-- : ''
        			item.xiaoji = item.goods_price * item.number
				}
			})
			bindHtml()

			localStorage.setItem('cartList',JSON.stringify(cartList))
		})


		//添加商品数量
		$('.cart').on('click','.add',function(){
			const id = $(this).data('id')

			cartList.forEach(item => {
				if(item.goods_id === id){
					item.number++
        			item.xiaoji = item.goods_price * item.number
				}
			})
			bindHtml()

			localStorage.setItem('cartList',JSON.stringify(cartList))
		})

		//点击删除
		$('.cart').on('click','.del',function(){
			const id = $(this).data('id')

			cartList = cartList.filter(item => item.goods_id != id)

			
			bindHtml()
			localStorage.setItem('cartList',JSON.stringify(cartList))
			// window.location.reload()
		})
	}