实现功能
1.能够新增减少商品数量
2.能够新增商品种类
3.能够计算商品总价，总价随着商品数量变化而变化
整体思路
1.先写一个初始商品，包含名称，单价，描述，然后将其隐藏
2.克隆初始商品，重置其名称，单价，描述
3.点击新增，将克隆的商品添加进去
补充
1.一定要为初始商品添加事件监听器,否则初始商品无法+-del
2.每一步操作都要更新总价
完整代码
shopcar.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>购物车</title> <link rel="stylesheet" type="text/css" href="shopcar.css"> </head> <body> <!-- 整体框架 --> <div id="frame"> <div id="list"> <!-- 单个元素样式案例 --> <div class="unit"> <img src="./img/img1.jpg" alt=""> <div> <p>鲜花</p> <p>单价<b class="jiage">10</b>元</p> <p>简介:平平无奇的一朵鲜花</p> </div> <div> <div class="add">+</div> <div class="geshu">0</div> <div class="sub">-</div> <div class="delete">del</div> </div> </div> </div> <div id="set"> 名称:<input type="text" id="name"> 单价:<input type="text" id="price"> 描述:<input type="text" id="description"> <!-- 添加图片:<input type="file" id="imageUpload"> --> <input id="tijiao" type="button" value="新增"> <p> <h1>总价:<b id="sum">0</b></h1> </p> </div> </div> <script src="shopcar.js"></script> </body> </html>
shopcar.js
// 在页面加载完成后隐藏初始商品 document.addEventListener('DOMContentLoaded', function () { var initialProduct = document.querySelector(".unit"); initialProduct.style.display = 'none'; }); // 增加商品函数 function addProductEventListener(newUnit) { var geshu = 0; var addButton = newUnit.querySelector(".add"); var subButton = newUnit.querySelector(".sub"); var deleButton = newUnit.querySelector(".delete"); var geshuDisplay = newUnit.querySelector(".geshu"); var unitPrice = parseFloat(newUnit.querySelector(".jiage").textContent); //------➕增加按钮 addButton.addEventListener('click', function () { geshu++; // 更新个数展示区域的数字 geshuDisplay.textContent = geshu; // 更新总价 sum.textContent = zongjia(); }); //------➖减少按钮 subButton.addEventListener('click', function () { if (geshu > 0) { geshu--; geshuDisplay.textContent = geshu; sum.textContent = zongjia(); } else { alert("已经是0,不能再减少了!"); } }); //------del删除按钮 deleButton.addEventListener('click', function () { newUnit.remove(); // 更新总价 sum.textContent = zongjia(); }); //------总价 sum.textContent = zongjia(); function zongjia() { var zj = 0; // 遍历所有的商品 var unitDisplay = document.querySelectorAll(".unit"); unitDisplay.forEach(function (unit) { var jiage = parseFloat(unit.querySelector(".jiage").textContent); var geshu = parseInt(unit.querySelector(".geshu").textContent); // 计算总价=个数*价格 zj += geshu * jiage; }); return zj; } } // 调用增加商品函数 // 一定要为初始商品添加事件监听器,否则初始商品无法+-del addProductEventListener(document.querySelector(".unit")); //------新增商品种类 // 提交按钮 var tijiaoButton = document.querySelector("#tijiao") tijiaoButton.addEventListener('click', function () { var name = document.querySelector("#name").value; var price = document.querySelector("#price").value; var description = document.querySelector("#description").value; // var imageUpload = document.querySelector("#imageUpload").files[0]; // 获取上传的图片文件 // 克隆之前存在的那个商品 var unitclone = document.querySelector(".unit").cloneNode(true); // 显示克隆的商品 unitclone.style.display = 'inline-block'; unitclone.querySelector("p").textContent = name; unitclone.querySelector(".jiage").textContent = price; unitclone.querySelector(".geshu").textContent = 0;//一定要个数归0,否则会克隆初始商品的个数 unitclone.querySelector("p:nth-of-type(3)").textContent = "描述" + description; // 将新克隆的商品元素添加到页面中 document.querySelector("#list").appendChild(unitclone); // 为新增商品添加事件监听器 addProductEventListener(unitclone); // 更新总价 sum.textContent = zongjia(); });
shopcar.css
* { margin: 0px; padding: 0px; text-align: center; } /* 整个大框框 */ #frame { width: 700px; height: 500px; border: 2px solid black; /* 居中 */ top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%); } /* 底部的商品列表 */ #list { width: 100%; height: 430px; border-bottom: 1px solid black; overflow-y: scroll; } /* 单个商品样式 */ .unit { width: 90%; height: 90px; margin: 10px auto; border: 1px solid black; } /* 放置商品图片 */ .unit>img { width: 20%; height: 100%; float: left; } /* 放置商品信息和按钮 */ .unit>div { width: 40%; height: 100%; float: left; } /* 选择所有带有class为unit的元素 的最后一个直接子div内的所有直接子div 就是➕➖ */ .unit>div:last-child>div { width: 25%; height: 100%; float: left; /* 设置行高居中 */ font-size: 30px; color: #ff8f8f; line-height: 270%; } /* 悬停变色,让这个元素看上去更像按钮 */ .unit>div:last-child>div:hover { font-size: 30px; color: #ff0000; } /* 设置面板 */ #set { width: 100%; height: 100px; }
