6的购物车

最新推荐文章于 2024-09-29 11:25:09 发布

遇考则过

最新推荐文章于 2024-09-29 11:25:09 发布

阅读量38

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/m0_66799369/article/details/130256886

版权

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title></title>
	<link rel="stylesheet" href="css/index.css"/>
	</head>
	<body>

	<div id="books">
	<ul>
	<li>
	<img src="img/book1.jpeg" width="150px" height="150px"
	class="addBookPic"><br>
	<span class="addBookName">JavaScript DOM编程艺术</span><br />
	￥<span class="addBookPrice">29.30 </span><br>
	<a href="javascript:;" class="shopping_yellow">购买</a>
	</li>
	<li>
	<img src="img/book2.jpeg" width="150px" height="150px"
	class="addBookPic"><br>
	<span class="addBookName">深入浅出MySQL数据库开发</span><br />
	￥<span class="addBookPrice">47.20</span><br>
	<a href="javascript:;" class="shopping_yellow">购买</a>
	</li>
	<li>
	<img src="img/book3.jpeg" width="150px" height="150px"
	class="addBookPic"><br>
	<span class="addBookName">解禁</span><br />
	￥<span class="addBookPrice">19.40</span> <br>
	<a href="javascript:;" class="shopping_yellow">购买</a>
	</li>
	<li>
	<img src="img/book4.jpeg" width="150px" height="150px"
	class="addBookPic"><br>
	<span class="addBookName">大玩家</span><br />
	￥<span class="addBookPrice">20.60</span> <br>
	<a href="javascript:;" class="shopping_yellow">购买</a>
	</li>
	</ul>
	</div>
	<div id="divMain">
	<div id="divSpcart">
	<table cellpadding="0" cellspacing="0">
	<thead>
	<tr class="trColHeader">
	<th class="picCol"> </th>
	<th class="booknameCol">书名</th>
	<th class="priceCol">价格</th>
	<th class="operaCol">操作</th>
	</tr>
	</thead>
	<tbody>
	<!-- <tr>
	<td><img src="img/小王子.jpg" /></td>
	<td class="bookname">小王子</td>
	<td>￥<span class="price">36</span></td>
	<td><img class="delImg" src="img/del.gif" /></td>
	</tr> -->
	</tbody>
	</table>
	</div>
	</div>
	</body>
	<script>
	{
	let data = [
	{
	pic:"img/小王子.jpg",
	bookname: "小王子",
	price :36

	}, {
	pic:"img/呐喊.jpg",
	bookname: "呐喊",
	price :39
	}, {
	pic:"img/阿Q正传.jpg",
	bookname: "阿Q正传",
	price :38
	}
	]
	function render(data){
	let str=" ";

	data.forEach((item)=>{
	str +=`<tr>
	<td><img src="${item.pic}"/></td>
	<td class="bookname">${item.bookname}</td>
	<td>￥<span class="price">${item.price}</span></td>
	<td><img class="delImg" src="img/del.gif" /></td>
	</tr>`;
	})
	document.querySelector("tbody").innerHTML= str;

	addEvent()
	remove()
	}
	function remove()
	{

	//获取tbody里的tr
	let trs =document.querySelectorAll("tbody tr");
	//循环判断

	trs.forEach((item,key)=>{

	let remove = item.querySelector(".delImg");

	remove.onclick = function(){
	if(confirm("删除吗"))
	{
	data.splice(key,1);

	//刷新数据
	render(data)
	}
	}
	})
	}



	function addEvent()
	{
	//获取所有的li
	let lis =document.querySelectorAll("li");

	//循环li拿到每个li内的元素
	lis.forEach((item,key)=>{
	console.log(item)

	//获取购买链接 shopping_yellow
	let addBtn =item.querySelector(".shopping_yellow");
	//给购买链接添加点击事件
	addBtn.οnclick=function(){

	//获取图片都要输出
	let pic = item.querySelector(".addBookPic").getAttribute("src");
	console.log(pic)
	//获取书名
	let name=item.querySelector(".addBookName").innerHTML;
	console.log(name)
	//获取价格
	let price=item.querySelector(".addBookPrice").innerHTML;
	console.log(price)

	//获取相对应的书籍信息，添加到data数组
	data.push({

	pic:pic,
	bookname:name,
	price:price
	})
	//刷新数据
	render(data)
	}
	})
	}
	//外面也要刷新
	render(data)
	}
	</script>
	</html>