JQuery即时显示增减数字代码

因为需要,写了一个类似商城增加购物数量即时功能,在这里记一下、分享一下,以下是代码:

<html>
<head>
<title>JQuery即时显示增减数字代码</title>
<script type=”text/javascript” src=”js/jquery-1.7.2.min.js”></script>
<script>
$(document).ready(function() {
//下面JQuery点击事件
//点减号按钮就减去1
$(“.wojian”).click(function() {      //获取按钮的class为wojian的点击事件
var vliang=$(“#liang”).val();  //获取文本框本身的值并且进行赋值
if (parseInt(vliang)==1) {return;};   //如果文本框的值为1就返回
$(“#liang”).val(parseInt(vliang)-1);   //将原来的数减去1并且返回 , 注意:最好用parseInt函数转换成整型
});
//点加号就在原来的数值上加1
$(“.wojia”).click(function() {      //获取按钮的class为wojia的点击事件
var vliang=$(“#liang”).val();  //获取文本框本身的值并且进行赋值
if (parseInt(vliang)==15 || parseInt(vliang)>15) {return};    //这里设定了文本框里面的最大值15,可自行设置
$(“#liang”).val(parseInt(vliang)+1);   //将原来的数加上1并且返回到文本框内,注意啊:一定要将vliang这个变量用parseInt函数进行转换,否则会以字符串的形式进行累加,如:本来值是1,那么,再加上1就是11了。。。切记
});
});
</script>
</head>
<body>

<!–以下是HTML代码–>
<input value=”-” /><input type=”text” id=”liang” value=”1″ disabled=”disabled” /><input value=”+” />
</body>
</html>

分享到:
标签:Jquery,
^_^ 亲爱的客官,如果您觉得本文对您有好处,请移动你的鼠标点点下面的广告或上面的或右上角的,非常感谢~ ^_^

报歉!评论已关闭.