如何使用 jQuery 增加数量字段的值？

我有一个带有一些数量字段的表格，每一侧都有一个加号和减号，

    <form id="myform">
        product1
        <input type="submit" value="+" id="add">
        <input type="text" id="qty1">
        <input type="submit value="-" id="minus">
        product2
        <input type="submit" value="+" id="add">
        <input type="text" id="qty2">
        <input type="submit value="-" id="minus">
    </form>

如果添加，我想将该字段的值增加一 按钮被按下，如果按下减号则减一。 而且该值不应小于 0。

有没有办法在 jQuery 中做到这一点？

首先，type="submit"应该type="button"在所有情况下。另外，两个元素不能具有相同的 ID；我假设你想要add1, minus1, add2, minus2, etc.

下面的 jQuery 代码应该可以很好地工作。

$(function () {
    var numButtons = 10;
    for (var i = 1; i <= numButtons; ++i) {
        $("#add" + i).click(function () {
            var currentVal = parseInt($("#qty" + i).val());
            if (!isNaN(currentVal)) {
                $("#qty" + i).val(currentVal + 1);
            }
        });

        $("#minus" + i).click(function () {
            var currentVal = parseInt($("qty" + i).val());
            if (!isNaN(currentVal) && currentVal > 0) {
                $("#qty" + i).val(currentVal - 1);
            }
        });
    }
});

值得注意：

• 我把所有东西都包裹在一个$(function() { ... })调用，以便您仅在页面加载后附加事件处理程序。 （具体来说，之后DomContentLoaded事件。）这可以防止有关 ID 为“add1”的对象不存在或其他问题的错误，因为从技术上讲，该对象在页面实际加载之前并不存在。
• 检查NaN处理用户在字段中输入非数字内容的情况。您可以为此添加自己的逻辑，例如每当有人单击添加或减去时，自动将非数字属性转换为 0。