layui加减按钮如何控制数字输入框的值

来源:undefined 2025-02-02 14:55:08 1036

layui提供加减按钮控制数字输入框值的功能,具体步骤如下:引入layui脚本创建加减按钮设置加减按钮的事件监听器

layui 加减按钮控制数字输入框的值

layui 提供的加减按钮组件可以方便地控制数字输入框的值。以下是实现这一功能的步骤:

1. 引入 layui 脚本

1

<script src="layui/layui.js"></script>

登录后复制

2. 创建加减按钮

在需要加减的数字输入框旁边创建两个按钮:

1

2

3

<input type="number" id="num">

<button class="layui-btn layui-btn-xs" id="minus">-</button>

<button class="layui-btn layui-btn-xs" id="plus">+</button>

登录后复制

3. 设置加减按钮的事件监听器

使用 layui 的 on 方法为加减按钮设置点击事件监听器:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

layui.use([element], function(){

var element = layui.element;

// 减按钮

element.on(click(minus), function(){

var num = $(#num).val();

if (num > 1) {

num--;

}

$(#num).val(num);

});

// 加按钮

element.on(click(plus), function(){

var num = $(#num).val();

num++;

$(#num).val(num);

});

});

登录后复制

以上就是layui加减按钮如何控制数字输入框的值的详细内容,更多请关注php中文网其它相关文章!

最新文章