JQuery实现购物车数量加减总价累加

最新推荐文章于 2022-07-18 16:55:09 发布

原创最新推荐文章于 2022-07-18 16:55:09 发布 · 1.4w 阅读

19 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的购物车功能，通过简单的按钮点击事件调整商品数量，并实时更新所选商品的总价。该示例展示了如何利用jQuery选择器和事件处理来实现常见的电子商务功能。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8" />
<title>jQuery实现购物车多物品数量的加减+总价计算</title> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script> 
<script> 
$(function(){ 
$(".add").click(function(){
		var t = $(this).parent().find('input[class*=text_box]');
		t.val(parseInt(t.val())+1);
		setTotal();
	})

	$(".min").click(function(){
		var t = $(this).parent().find("input[class*=text_box]");
		t.val(parseInt(t.val())-1);
		if(parseInt(t.val())<0){
			t.val(0);
		}
		setTotal()
	})
	
	function setTotal(){
		var sum = 0;
		$("#tab td").each(function(){
		
		var num = parseInt($(this).find("input[class*=text_box]").val());
		var price = parseFloat($(this).find("span[class*=price]").text());
		sum += num*price;
		})
		$("#total").html(sum.toFixed(2));
	}
	setTotal();

}) 
</script> 
</head> 
<body> 
<table id="tab"> 
<tr> 
<td> 
<span>单价:</span><span class="price">1.50</span> 
<input class="min" name="" type="button" value="-" /> 
<input class="text_box" name="" type="text" value="1" /> 
<input class="add" name="" type="button" value="+" /> 
</td> 
</tr> 
<tr> 
<td> 
<span>单价:</span><span class="price">3.95</span> 
<input class="min" name="" type="button" value="-" /> 
<input class="text_box" name="" type="text" value="1" /> 
<input class="add" name="" type="button" value="+" /> 
</td> 
</tr> 
</table> 

<p>总价：<label id="total"></label></p> 
</body> 
</html>

再举一个获取tr下面第一个td的值：

<!DOCTYPE html>  
<html lang="zh-CN">  
<head>  
    <meta charset="utf-8" />  
<title></title>   
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>   
<script>   
$(function(){   
$(".add").click(function(){  
        var t = $(this).parent().parent().find('td:first');  
        console.info(t.text()); 
    })  
      
})   
</script>   
</head>   
<body>   
<table id="tab">   
<tr>
<th>ID</th>
<th>name</th>    
<th>操作</th>   
</tr>
<tr>
<td class="id">123</td>
<td>admin</td>
<td><a href="#" class="add">弹</a></td>
</tr>

<tr>
<td class="id">456</td>
<td>ceshi</td>
<td><a href="#" class="add">弹</a></td>
</tr>

</body>   
</html>