jquery来实现的添加商品和减少商品数量

来源：互联网发布：小学数学出题软件编辑：程序博客网时间：2024/04/30 14:19

演示地址:http://www.corange.cn/demo/3866/index.html

http://www.corange.cn//uploadfiles/20130406191703_69400.jpg

<!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>无标题文档</title>
<script type="text/javascript" src="../jquery-1.9.1.min.js"></script>
<style type="text/css">
.num_box{width:100%;float:left;}
.num_box a{width:20px;text-align:center;cursor:pointer;}
.num_box a:hover{background:#f0f0f0;}
.num_box a:active{background:#E3E3E3;}
.num,.num_box a{height:20px;line-height:20px;border-color:#ccc;border-style:solid;color:#333;float:left;}
.num{border-width:1px;text-align:left;text-indent:5px;line-height:15px\9;padding:0;margin:0;width:100px;}
.J_jia{border-width:1px 0 1px 1px;border-radius:3px 0 0 3px;}
.J_jian{border-width:1px 1px 1px 0;border-radius:0 3px 3px 0;}
</style>
</head>
<body>
<p class="num_box"><a class="J_jia">+</a><label><input type="text" class="num" /></label><a class="J_jian">-</a></p>
<script type="text/javascript">
$(document).ready(function(){
var add,reduce,num,num_txt;
add=$(".J_jia");//添加数量
reduce=$(".J_jian");//减少数量
num="";//数量初始值
num_txt=$(".num");//接受数量的文本框
//var num_val=num_txt.val();//给文本框附上初始值

/*添加数量的方法*/
add.click(function(){
num = $(".num").val();
num++;
num_txt.val(num);
//ajax代码可以放这里传递到数据库实时改变总价
});

/*减少数量的方法*/
reduce.click(function(){
//如果文本框的值大于0才执行减去方法
num = $(".num").val();
if(num >0){
//并且当文本框的值为1的时候，减去后文本框直接清空值，不显示0
if(num==1)
{ num--;
num_txt.val("");
}
//否则就执行减减方法
else
{
num--;
num_txt.val(num);
}

}
});
})
</script>
</body>
</html>

原文地址:http://www.corange.cn/archives/2013/04/3866.html