jquery方法实现input点击加减

来源:互联网 发布:hack软件 编辑:程序博客网 时间:2024/06/13 08:40

HTML:

<div class="scroll-btn">
<input class="scroll-txt" type="text" value="2" readonly>
<div class="btn-right">
<span class="glyphicon scroll-chevron glyphicon-chevron-up" ></span>
<span class="glyphicon scroll-chevron glyphicon-chevron-down" ></span>
</div>
</div>

js:

<script type="text/javascript">
$('.scroll-chevron').click(function(){ //给上下按钮加点击事件
var sinput = $(this).parents('.scroll-btn').find('.scroll-txt');//给input定义变量
if($(this).hasClass('glyphicon-chevron-up')){//判断点击按钮是否有class:glyphicon-chevron-up
sinput.val(parseInt(sinput.val())+1);//有,为input中的值加1
}else{
if(parseInt(sinput.val()) < 1 ) {//判断input中得值是否小于1
return                       //是,停止动作

sinput.val(parseInt(sinput.val())-1);//否,让input中得值减1
}
});
</script>

效果如图:


本文档中,上下按钮标识使用了bootstrap字体图标,需要引入bootstrap的css文件。

1 0
原创粉丝点击