如何在 jQuery 中实现带加减按钮的数字输入框，并在 layui 中使用？
使用 jQuery 创建带加减按钮的数字输入框，并在 layui 框架中应用，可以实现便捷的数值输入和修改功能。
步骤 1：创建 HTML 输入框
1
2
3
4
5
<div class="input-number-wrapper">
<button type="button" class="layui-btn layui-btn-primary dec-btn">-</button>
<input type="number" value="1" class="input-number" />
<button type="button" class="layui-btn layui-btn-primary inc-btn">+</button>
</div>
步骤 2：加载依赖项
确保已加载了 jQuery 和 layui 库。
1
2
<script src="jquery.min.js"></script>
<script src="layui.js"></script>
步骤 3：使用 jQuery 实现加减逻辑
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(function() {
$(".input-number-wrapper").each(function() {
var decBtn = $(this).find(".dec-btn");
var incBtn = $(this).find(".inc-btn");
var inputNumber = $(this).find(".input-number");
decBtn.on("click", function() {
inputNumber.val(Math.max(1, parseInt(inputNumber.val()) - 1));
});
incBtn.on("click", function() {
inputNumber.val(parseInt(inputNumber.val()) + 1);
});
});
});
步骤 4：在 layui 中使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
layui.form.on("elemUpdate", function(data) {
if (data.field.name === "inputNumber") {
updateInputNumber(data.element);
}
});
function updateInputNumber(element) {
var inputNumber = $(element).find(".input-number");
var decBtn = $(element).find(".dec-btn");
var incBtn = $(element).find(".inc-btn");
inputNumber.val(layui.data("input-number")[inputNumber.attr("name")]);
decBtn.on("click", function() {
inputNumber.val(Math.max(1, parseInt(inputNumber.val()) - 1));
});
incBtn.on("click", function() {
inputNumber.val(parseInt(inputNumber.val()) + 1);
});
}
以上就是如何使用jQuery实现带加减按钮的数字输入框，并在layui中使用的详细内容，更多请关注php中文网其它相关文章！