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文件。
- jquery方法实现input点击加减
- jquery实现点击input选中文字代码
- jquery快速实现商品数量加减的方法
- jquery实现input点击输入框弹出日期
- 实现点击加减数字进行变化
- jQuery实现购物车数字加减效果
- jQuery多个input求和的实现方法
- jquery获取input单选按钮点击事件及单选按钮值的方法
- jQuery 实现点击空白关闭目标元素的实现方法
- 安卓点击加减号实现数字加减功能
- jquery实现tab菜单点击换菜单图片方法
- jquery 实现input宽度自适应
- jquery 实现 input 内容全选
- jQuery实现input下拉多选框
- jQuery实现购物车物品数量的加减
- jQuery实现购物车物品数量的加减
- jQuery 实现列表中的数字加减框&JSON化数据
- jQuery实现购物车物品数量的加减
- 常用的C库函数
- Google App Engine的app.yaml详细说明
- linux 内核定时器
- 设计模式之-享元模式
- MS SQL计算最大公约数和最小公倍数函数
- jquery方法实现input点击加减
- 100天土鸡饲养计划(52)
- C语言学习——结构体(struct)的使用
- react-native 与高德地图(amap)原生互相调用
- 清除节点下的所有子节点中UILabel的内容
- 关于CC2530存储器映射的讨论
- Linux进程状态解析之R、S、D
- 常用的八种排序算法与Java代码实现
- 模块的封装(二):C语言类的继承和派生