一、知识点准备
1）准备并配置好插件相关文件（css、js、图片）
（2）编写html和js代码
二、问题
遍历时出错
切换图标未实现
解决
查看老师代码
三、实现代码
.html jquery
<!DOCTYPE html><html><head><meta charset="utf-8"><title>购物车</title><link href="css/common.css" rel="stylesheet"/><link href="css/cart.css" rel="stylesheet"/><script type="text/javascript">//删除function delTag(thisObj){if(confirm("确认从购物车中移除该商品")){var parentNode=thisObj.parentNode;var reprent=parentNode.parentNode;var grparent=reprent.parentNode;grparent.removeChild(reprent);}}//判断class是否存在function hasClass(elements, cName){return !!elements.className.match(new RegExp("(\\s/^)"+cName+"(\\s/$)"));}//切换classfunction toggleClass(elements,cName){if(hasClass(elements,cName)){elements.className=elements.className.replace(new RegExp("(\\s/^)"+cName+"(\\s/$)", ));}else{elements.className+=" "+cName;}}//选中状态切换function changeSelect(thisObj){toggleClass(thisObj, "active");}</script><style>.tra td input{text-align: center;height: 40px;width: 40px;border: 1px solid black;}</style></head><body><div class="all"><iframe class="iheader" src="header.html"></iframe><div class="cars"><table><tr class="tr1"><th>商品名称</th><th>市场价</th><th>定购价</th><th>数量</th><th>操作</th></tr><tr class="tra"><td><a><img src="img/ico_checkout.png" style="width: 20px;height: 20px;margin-top: 15px;" onclick="changeSelect(this)"/></a><span><img src="img/cake1_s1.jpg" style="width: 100px;height: 80px; margin-top: -20px;"/></span><span>[悦轩饼家蛋糕]榴芒双拼(约2磅)一双拼蛋糕</span></td><td><p style="text-decoration: line-through; text-align: center;">￥298</p></td><td style="text-align: center;">198</td><td style="text-align: center;"><input class="jian" type="button" value="减"/><input class="num" type="text" value="1"/><input class="add" type="button" value="加"/></td><td style="text-align: center;"><a href="javascript:void(0)" class="delBtn" onclick="delTag(this)">删除</a></td></tr><tr class="tra"><td><a><img src="img/ico_checkout.png" style="width: 20px;height: 20px;margin-top: 15px;"/></a><span><img src="img/cake2.jpg" style="width: 100px;height: 80px; margin-top: -20px;"/></span><span>[悦轩饼家蛋糕]芒果千层(900g)</span></td><td><p style="text-decoration: line-through; text-align: center;">￥289</p></td><td style="text-align: center;">169</td><td style="text-align: center;"><input class="jian" type="button" value="减"/><input class="num" type="text" value="1"/><input class="add" type="button" value="加"/></td><td style="text-align: center;"><a href="javascript:void(0)" class="delBtn" onclick="delTag(this)">删除</a></td></tr><tr class="tra"><td><a><img src="img/ico_unchecked.png" style="width: 20px;height: 20px;margin-top: 15px;"/></a><span><img src="img/cake3.jpg" style="width: 100px;height: 80px; margin-top: -20px;"/></span><span>[悦轩饼家蛋糕]榴莲香雪(约2磅)一榴莲蛋糕</span></td><td><p style="text-decoration: line-through; text-align: center;">￥260</p></td><td style="text-align: center;">149</td><td style="text-align: center;"><input class="jian" type="button" value="减"/><input class="num" type="text" value="1"/><input class="add" type="button" value="加"/></td><td style="text-align: center;"><a href="javascript:void(0)" class="delBtn" onclick="delTag(this)">删除</a></td></tr></table></div><div class="carx"><p class="carje" style="font-size: 12px;">应付金额:<span style="color: orange;font-weight: bold;">￥</span><span class="sum" style="color: orange;font-weight: bold;">516</span><a style="color: aliceblue;font-weight: bold;width: 50px; height: 50px;background-color: orange;border: 1px solid orangered;width: 50px;height: 48px;font-size: 19px;">去结算</a></p></div><iframe class="ifooter" src="footer.html"></iframe></div></body>//计算价格<script src="js/jquery-3.6.0.min.js"></script><script type="text/javascript">$(function(){//计算总金额function getSum(){var sum=0;//遍历获取到每一个对象$(".num").each(function(){//3.获取单价(打折):parent()找父标签，prev()找它前面的同级标签var price=$(this).parent().prev().text();//4.计算总价sum+=$(this).val()*price;});//5.把总价放入指定位置$(".sum").text(sum);}//单击减法按钮：减去右边的文本框里的数字-1$(".jian").click(function(){//1.获取文本框里的数字：next（）找它后面的同级标签var num=$(this).next().val();//2.判断 当num=大于0时，才减-1if(num>0){//3.把数量文本框里的数字-1$(this).next().val(num-1);getSum();}// //3.// var price=$(this).parent().prev().text();});//加//单击加法按钮：减去右边的文本框里的数字+1$(".add").click(function(){//1.获取文本框里的数字：next（）找它后面的同级标签var num=$(this).prev().val();//2.把数量文本框里的数字+1var n=parseInt(num);//把num变成int类型$(this).prev().val(n+1);getSum();});//});</script></html>
.css
.all{width:1300px;margin: auto;/* border: 1px solid red; */}.iheader{height: 80px;}iframe{width: 1230px;}#carbig{border: 1px dashed beige;width: 1100px;/* line-height: 800PX; */}table {font-size: 12px;border: 1px dashed black;width: 1200px;height: 400px;/* text-align: center; */border-collapse: collapse;}table th{/* border: 1px solid black; *//* text-align: center; */}table th td {/* text-align: center; *//* border: 1px blue solid; */}table tr td{/* border: 1px solid black; *//* text-align: center; */}table tr{border: 1px dashed gainsboro;}.carx{border: 1px dashed gainsboro;width: 1200px;line-height: 50px;margin-top: 10px;/* line-height: 50px; */}.all .carx .carje{text-align:end;}.all .cars .tr1{border: 1px dashed gainsboro;background-color: gray;}
