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

Question

我有一个带有一些数量字段的表格,每边有一个加号和减号,

    <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>

如果按下添加按钮,我想将字段的值增加1,如果按下减号,则减1.此值也不应小于0.

有没有办法在jQuery中执行此操作？

Answer 1

首先,type="submit"应该type="button"在所有情况下.此外,您不能拥有两个具有相同ID的元素; 我假设你想add1,minus1,add2,minus2,等.

以下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.