jQuery 递增或递减变量 1

Question

我在输入字段的两侧都有简单的加号和减号按钮，如下面的代码所示

<input type="button" value="-" id="subs" class="btn btn-default pull-left" style="margin-right: 2%" onclick="subst()" />&nbsp;
<input type="text" style="width: 410px;text-align: center; margin: 0px;" class="onlyNumber form-control pull-left" id="noOfRoom" value="<?php echo set_value('noOfRoom'); ?>" name="noOfRoom" />&nbsp;
<input type="button" value="+" id="adds" onclick="add()" class="btn btn-default" />

目的是在添加房间时添加或减去房间，而 jquery 的功能是

function add() {
    var a = $("#noOfRoom").val();
    a++;
    if (a => 1) {
        $("#subs").removeAttr("disabled");
    }
    $("#noOfRoom").val(a);
};

function subst() {
    var b = $("#noOfRoom").val();
    if (b.length > 0 && b >= 1) {
        b--;
        $("#noOfRoom").val(b);
    }
    else {
        $("#subs").attr("disabled", "disabled");
    }
};

但显示以下问题

1. 当我在初始阶段单击减法 (-) 按钮时 -1 显示在输入框中，默认情况下应禁用减法 (-) 按钮以使房间号为负。
2. 每次我点击加号或减号按钮时，数字都会加 2 或减 2。我该如何解决？

原文由 user3518741 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

由于没有人采纳这些建议，因此将评论移至回答：

• 我建议不要将内联 onclick= 处理程序与 jQuery 一起使用。他们无缘无故地将事件处理程序与事件代码分开，并且不允许使用 jQuery 事件处理程序的额外功能。
• 使用 prop 而不是 attr DOM 元素属性（如禁用）。这具有采用 boolean 值的额外优势。
• 然后您可以简单地使用 !a 来控制禁用状态（因为您只检查 0）。
• 作为一个好习惯，总是选择 一次 DOM 元素并保存选择器。

例如

$('#adds').click(function add() {
    var $rooms = $("#noOfRoom");
    var a = $rooms.val();
    a++;
    $("#subs").prop("disabled", !a);
    $rooms.val(a);
});
// Set initial disabled state
$("#subs").prop("disabled", !$("#noOfRoom").val());

$('#subs').click(function subst() {
    var $rooms = $("#noOfRoom");
    var b = $rooms.val();
    if (b >= 1) {
        b--;
        $rooms.val(b);
    }
    else {
        $("#subs").prop("disabled", true);
    }
});

JSFiddle： https://jsfiddle.net/k7nyv84b/4/

原文由 Gone Coding 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

更新添加小提琴 https://fiddle.jshell.net/n7ug52dr/

每次点击只会加减1，不会显示-1

---

您可以像这样编辑代码：

 function add() {
    var a = $("#noOfRoom").val();
    a++;
    if (a && a >= 1) {
        $("#subs").removeAttr("disabled");
    }
    $("#noOfRoom").val(a);
};

function subst() {
    var b = $("#noOfRoom").val();
    // this is wrong part
    if (b && b >= 1) {
        b--;
        $("#noOfRoom").val(b);
    }
    else {
        $("#subs").attr("disabled", "disabled");
    }
};

原文由 Jelly 发布，翻译遵循 CC BY-SA 3.0 许可协议