jquery按钮控制text文本框商品数量增加或减少

来源：互联网发布：数控拉料器怎么编程编辑：程序博客网时间：2024/04/30 10:15
jquery按钮控制text文本框商品数量增加或减少，加了很多判断，记录一下

<!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" /><link href="http://www.jsfoot.com/skin/css/style.css" type="text/css" rel="stylesheet" /><style type="text/css">*{margin:0;padding:0;}a,img{border:0;text-decoration:none;}body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}/* p_number */.p_number{border:solid 1px #ddd;padding:10px 0 0 10px;width:480px;height:80px;margin:40px auto;}.p_number .f_l{float:left;}.p_number .add_chose{width:105px;}.p_number .add_chose a{float:left;margin:5px 0 0 0;display:block;width:15px;height:15px;line-height:99em;overflow:hidden;background:url(http://www.jsfoot.com/jquery/demo/2013-01-05/images/reduce-add.gif) no-repeat;}.p_number .add_chose a.reduce{background-position:0 0;}.p_number .add_chose a.reduce:hover{background-position:0 -16px;}.p_number .add_chose a.add{background-position:-16px 0;}.p_number .add_chose a.add:hover{background-position:-16px -16px;}.p_number .add_chose .text{float:left;margin:0 5px;display:inline;border:solid 1px #ccc;padding:4px 3px 4px 8px;width:40px;line-height:18px;font-size:14px;color:#990000;font-weight:800;}.p_number .buy{line-height:2em;}.p_number .buy .total-font{font-family:Arial;font-size:26px;}.p_number .buy .jifen{margin-left:20px;color:#ACACAC;}.p_number .buy .jifen b{margin:0 3px;}</style><script type="text/javascript" src="jqlx/jquery-1.8.0.js"></script><script>(function($){function shownum(unprice_id,num_id,price_id,jifen_id){this.unprice_id=unprice_id;this.num_id=num_id;this.price_id=price_id;this.jifen_id=jifen_id}shownum.prototype={changeprice:function(){var now_unit= parseInt($("#"+this.unprice_id).text().slice(1));var now_num=$("#"+this.num_id).val();$("#"+this.price_id).text("￥"+now_unit*now_num);$("#"+this.jifen_id).text(now_unit*now_num);}}$(function(){  gouwu();  function gouwu(){     var shownum1=new shownum("price_item_1","qty_item_1","total_item_1","total_points"); shownum1.changeprice();  $(".add").click(function(){ $("#qty_item_1").val(function(index,value){ value++; return value; }); shownum1.changeprice();  })    $("#qty_item_1").keyup(function(e){        if(e.which==38){    $(".reduce").trigger("click")}else if(e.which==40){    $(".add").trigger("click")}else{                        if(e.which<48 || e.which>57){                           $(this).val(function(index,value){    var len=value.length;    return value.replace(/[^0-9]/ig, "");//剔除非数字   });}shownum1.changeprice();}  })      $(".reduce").click(function(){ $("#qty_item_1").val(function(index,value){ value--; value=value<0?0:value; return value; }); shownum1.changeprice();  })    }})})(jQuery)</script></head><body><div class="shortcut"><h1><a href="http://www.jsfoot.com/jquery/form/more/2013-01-05/880.html">jquery按钮控制text文本框商品数量增加或减少</a></h1><span class="right"><a href="http://www.jsfoot.com/jquery/form/more/2013-01-05/880.html"><strong>下载特效</strong></a></span><div class="clr"></div></div><!--/ Codrops top bar --><div class="headeline"></div><div class="p_number"><div style="height:36px;font-size:16px;">商品单价：<strong id="price_item_1">￥350.00</strong></div><div class="f_l add_chose"><a class="reduce" href="javascript:void(0)">-</a><input type="text" name="qty_item_1" value="1" id="qty_item_1"class="text" /><a class="add" href="javascript:void(0)">+</a></div><div class="f_l buy">总价：<span class="total-font" id="total_item_1">￥89.00</span><input type="hidden" name="total_price" id="total_price" value="" /><span class="jifen">购买商品可获得：<b id="total_points">18</b>积分</span></div></div><!--演示内容结束--></body></html>