jQuery实现购物车物品数量的加减

最新推荐文章于 2022-07-25 00:23:07 发布

网络剑客

最新推荐文章于 2022-07-25 00:23:07 发布

阅读量1.7w

点赞数 5

分类专栏： jQuery技术

本文链接：https://blog.csdn.net/dongsg11200/article/details/8762495

版权

jQuery技术专栏收录该内容

20 篇文章 0 订阅

订阅专栏

基于jquery的一款代码，实现购物车数据的加减，在淘宝网、京东商城购物时时经常见到的一个功能，点击文本框两侧的“+”与“-”，就可以增加或减少文本框内的数字值，每次步长为1，当然这个是可以自己设置的。本款效果除了加减功能外，还可以自动计算价格。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实现购物车物品数量的加减</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(function(){
	var t = $("#text_box");
	$("#add").click(function(){		
		t.val(parseInt(t.val())+1)
		setTotal();
	})
	$("#min").click(function(){
		t.val(parseInt(t.val())-1)
		setTotal();
	})
	function setTotal(){
		$("#total").html((parseInt(t.val())*3.95).toFixed(2));
	}
	setTotal();
})
</script>
</head>
<body>
<p>单价：3.95</p>
<input id="min" name="" type="button" value="-" />
<input id="text_box" name="" type="text" value="4" />
<input id="add" name="" type="button" value="+" />
<p>总价：<label id="total"></label></p>
</body>
</html>

网络剑客

关注

5
点赞
踩
9

收藏

觉得还不错? 一键收藏
5
评论
jQuery实现购物车物品数量的加减

基于jquery的一款代码，实现购物车数据的加减，在淘宝网、京东商城购物时时经常见到的一个功能，点击文本框两侧的“+”与“-”，就可以增加或减少文本框内的数字值，每次步长为1，当然这个是可以自己设置的。本款效果除了加减功能外，还可以自动计算价格。jQuery实现购物车物品数量的加减$(function(){ var t = $("#text_box"); $("#add").
复制链接

扫一扫