jquery实现类似于购物车数量加减和最终总价累加

一、js代码，html和css我放下面了，毕竟js重要点，记得引入jquery包

$(function() {
	//parent() 方法返回被选元素的直接父元素。
	//find() 方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。
	$(".plus").click(function() {
		var plusAdd = $(this).parent().find("input[class*=num]");
		plusAdd.val(parseInt(plusAdd.val()) + 1);
		setSum();
	})
	$(".reduce").click(function() {
		var reduce = $(this).parent().find("input[class*=num]");
		reduce.val(parseInt(reduce.val()) - 1);
		if (parseInt(reduce.val()) < 0) {
			reduce.val(0);
		}
		setSum();
	})
})

function setSum() {
	var sum = 0;
	$(".imgBox").each(function() {
		var num = parseInt($(this).find("input[class*=num]").val())
		var Price = parseFloat($(this).find("span[class*=money]").text())
		sum += num * Price;
	})
	$(".sumMoney").text(sum.toFixed(2))
}
setSum();

 

二、HTML代码块 

<div class="imgBox">
	<div class="img_box">
		<img src="img/5f16a322ae642.jpg">
	</div>
	<div class="titleName">
		<span>三层医用级口罩</span>
	</div>
	<div class="titleMoeny">
		<div class="moenyBox">
			￥<span class="money">3.60</span>
		</div>
		<div class="stock">
			<span>库存:9999</span>
		</div>
	</div>
	<div class="numberBox">
		<div class="number">
			<span class="conNum reduce">-</span>
			<input class="num" type="text" value="0" min="1" max="999" />
			<span class="conNum plus">+</span>
		</div>
	</div>
</div>
<div class="imgBox">
	<div class="img_box">
		<img src="img/5f16a322ae642.jpg">
	</div>
	<div class="titleName">
		<span>三层医用级口罩</span>
	</div>
	<div class="titleMoeny">
		<div class="moenyBox">
			￥<span class="money">2.50</span>
		</div>
		<div class="stock">
			<span>库存:9999</span>
		</div>
	</div>
	<div class="numberBox">
		<div class="number">
			<span class="conNum reduce">-</span>
			<input class="num" type="text" value="0" min="1" max="999" />
			<span class="conNum plus">+</span>
		</div>
	</div>
</div>
<div class="sumBox">
	<div class="sumLeft">
		<span>合计：</span>
		<span class="sumMoney">0.00</span>
	</div>
	<div class="sumRight">
		<span class="setMoeny">去结算</span>
	</div>
</div>

三、css代码块

.imgBox{
			width: 180px;
			height: 220px;
			margin: 4% 2% 0% 4%;
			background: #fff;
			float: left;
		}
		.img_box{
			width: 100%;
			height: 125px;
		}
		.img_box img{
			width: 100%;
			height: 100%;
		}
		.titleName{
			width: 100%;
			height: 30px;
			line-height: 30px;
			font-size: 14px;
			font-weight: bold;
			margin-left: 2%;
		}
		.titleMoeny{
			width: 100%;
			height: 30px;
		}
		.moenyBox{
			width: 60%;
			height: 100%;
			line-height: 30px;
			font-size: 16px;
			font-weight: bold;
			margin-left: 2%;
			color: red;
			float: left;
		}
		.stock{
			width: 36%;
			height: 100%;
			line-height: 30px;
			font-size: 16px;
			float: right;
			margin-right: 2%;
			font-size: 12px;
			color: #999;
		}
		.numberBox{
			width: 100%;
			height: 35px;
		}
		.number{
			width: 58%;
			height: 100%;
			margin: 1% auto;
		}
		.conNum{
			display: inline-block;
			width: 30px;
			height: 30px;
			line-height: 30px;
			text-align: center;
			border: 1px solid #ddd9da;
			float: left;
			font-size: 22px;
		}
		.num{
			width: 40px;
			height: 30px;
			line-height: 30px;
			text-align: center;
			float: left;
			border: 1px solid #ddd9da;
		}
		.sumBox{
			width: 70%;
			height: 40px;
			border-radius: 50px;
			background: #fff;
			position: fixed;
			bottom: 0;
			left: 15%;
			line-height: 40px;
			font-size: 18px;
			text-align: center;
			font-weight: bold;
		}
		.imgList{
			padding-bottom: 40px;
		}
		.clearfix:after{
		content:".";
		display:block;
		height:0;
		clear:both;
		visibility:hidden
		}
		.sumMoney{
			color: red;
		}
		.sumLeft{
			width: 60%;
			height: 100%;
			float: left;
		}
		.sumRight{
			width: 40%;
			height: 100%;
			float: right;
		}
		.setMoeny{
			display: inline-block;
			width: 60px;
			height: 35px;
			line-height: 35px;
			text-align: center;
			font-size: 14px;
			color: #fff;
			background: #007ACC;
			border-radius: 50px;
		}