jquery购物车
作者：互联网
html构建主题页面
<body>
<div class="head">
<ul>
<li><input type="checkbox" class="all"> 全选</li>
<li class="good">商品</li>
<li>单价</li>
<li>数量</li>
<li>小计</li>
<li>操作</li>
</ul>
</div>
<div class="goods w">
<div><input type="checkbox" class="select"></div>
<div class="food">
<div class="pic">
<img src="images/零食1.png">
<h3>百草味泡椒去骨鸭掌(酸辣味)125g肉类休闲零食鸭爪卤味网红小吃</h3>
</div>
<div class="price">￥19.90</div>
<div class="num">
<a href="javascript:;" class="decrement">-</a>
<input type="text " value="2" class="digit">
<a href="javascript:;" class="increment">+</a>
</div>
<div class="sum">￥19.90</div>
</div>
</div>
<div class="goods w">
<div><input type="checkbox" class="select"></div>
<div class="food">
<div class="pic">
<img src="images/零食2.png">
<h3>百草味黑胡椒鸡胸肉150g 低脂高蛋白健身代餐休闲儿童零食小吃</h3>
</div>
<div class="price">￥29.90</div>
<div class="num">
<a href="javascript:;" class="decrement">-</a>
<input type="text " value="1" class="digit">
<a href="javascript:;" class="increment">+</a>
</div>
<div class="sum">￥29.90</div>
</div>
</div>
<div class="goods w">
<div><input type="checkbox" class="select"></div>
<div class="food">
<div class="pic">
<img src="images/零食3.png">
<h3>百草味零食大礼包组合一整箱充饥夜宵麻辣卤味休闲食品小吃送女生</h3>
</div>
<div class="price">￥39.90</div>
<div class="num">
<a href="javascript:;" class="decrement">-</a>
<input type="text " value="1" class="digit">
<a href="javascript:;" class="increment">+</a>
</div>
<div class="sum">￥39.90</div>
</div>
</div>
</body>
jquery实现全选框和小计的数值计算
<script>
$(function() {
// 点击全选其他小框都选中
$(".all").change(function() {
$(".select").prop("checked", $(".all").prop("checked"))
})
$(".select").change(function() {
// 1.其他小框都选中 全选框也选中 有小框没被选中 全选框也不被选中
if ($(".select:checked").length == $(".select").length) {
$(".all").prop("checked", true)
} else {
$(".all").prop("checked", false)
}
})
//2. 点击加减号修改文本框内容
$(".increment").click(function() {
var n = $(this).siblings(".digit").val()
n++;
$(this).siblings(".digit").val(n);
// 3.计算小计的数值
var p = $(this).parent().siblings(".price").html();
p = p.substr(1);
$(this).parent().siblings(".sum").html('￥' + (p * n).toFixed(2));
})
$(".decrement").click(function() {
var n = $(this).siblings(".digit").val()
if (n == 0) {
return false
} //文本框值为0时 数字不能继续减
n--;
$(this).siblings(".digit").val(n);
// 3.计算小计的数值
var p = $(this).parent().siblings(".price").html();
p = p.substr(1);
$(this).parent().siblings(".sum").html('￥' + (p * n).toFixed(2));
})
$(".digit").change(function() {
var n = $(this).val();
var p = $(this).parent().siblings(".price").html();
p = p.substr(1);
$(this).parent().siblings(".sum").html('￥' + (p * n).toFixed(2));
})
})
</script>
css样式
<style>
* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
a {
color: black;
text-decoration: none;
}
.w {
width: 1200px;
margin: 10px auto;
}
.head {
width: 1200px;
height: 50px;
background-color: rgba(187, 187, 187, 0.733);
margin: 10px auto;
}
.head li {
float: left;
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
margin-right: 72px;
}
.head .good {
margin-right: 240px;
}
.goods {
position: relative;
height: 160px;
border-top: 2px solid rgb(122, 120, 120);
}
.goods .select {
display: inline-block;
position: absolute;
left: 25px;
top: 13px;
width: 13px;
height: 13px;
}
.food {
position: absolute;
left: 100px;
height: 160px;
width: 390px;
}
.food img {
position: absolute;
top: 20px;
left: 20px;
height: 110px;
width: 100px;
border: 1px solid rgb(143, 141, 141);
}
.food h3 {
position: absolute;
left: 135px;
width: 255px;
height: 160px;
padding-top: 20px;
font-size: 10px;
}
.food .price {
position: absolute;
top: 20px;
left: 415px;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
}
.food .num {
position: absolute;
left: 580px;
top: 20px;
width: 100px;
height: 20px;
}
.decrement {
float: left;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
border: 1px solid rgb(119, 117, 117);
}
.food .digit {
position: absolute;
top: 0;
width: 60px;
height: 20px;
text-align: center;
border: none;
border-top: 1px solid rgb(119, 117, 117);
border-bottom: 1px solid rgb(119, 117, 117);
border-radius: 0px;
outline: medium;
}
.increment {
float: right;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
border: 1px solid rgb(119, 117, 117);
}
.sum {
position: absolute;
top: 20px;
left: 750px;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
}
</style>
小计值随着数量增加减少做出相应变化
标签：jquery,top,height,width,siblings,20px,购物车,border 来源： https://blog.csdn.net/weixin_54973904/article/details/114853642