一、知识点准备
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/$)"));
}
//切换class
function 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时，才减-1
if(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.把数量文本框里的数字+1
var 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;
}