首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

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

2013-04-07 
jQuery实现购物车物品数量的加减基于jquery的一款代码,实现购物车数据的加减,在淘宝网、京东商城购物时时经

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

基于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>


热点排行