Javascript jQuery按1递增或递减变量

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

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

但是，下面的问题显示了出来

当我在初始阶段单击减法（-）按钮时，输入框中会显示-1，默认情况下，应禁用减法（-）按钮以使房间编号为负数

每次我点击加号或减号按钮时，数字都会被加号或减号2。我该怎么解决呢

---

更新添加小提琴

每次单击时，只会添加和细分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");
    }
};

---

给你，冠军！使您的代码也变得更干净

参见下面的工作示例

$（函数（）{
$（'添加'）。在（'单击'，添加'）上；
$（'#subs'）。在（'click'，remove'）；
});
函数add（）{
变量输入=$（“#noofrom”），
value=input.val（）；
输入.val（++值）；
如果（值>0）{
$（'#subs'）.removeAttr（'disabled'）；
}
}
函数删除（）{
变量输入=$（“#noofrom”），
value=input.val（）；
如果（值>0）{
输入.val（--值）；
}否则{
$（'#subs'）.attr（'disabled'，'disabled'）；
}
}

看看这个

函数add（）{
var a=$（“#noofrom”）.val（）；
a++；
如果（a>=1）{
$（“#subs”）.removeAttr（“禁用”）；
}
警报（a）；
$（“#noofrom”）.val（a）；
}
函数subst（）{
var b=$（“#noofrom”）.val（）；
如果（b.length>0&&b>=1）{
b--；
警报（b）；
$（“#noofrom”）.val（b）；
}
否则{
$（“#subs”）.attr（“禁用”、“禁用”）；
}

//警惕（“工作正常”）；

---

}

由于没有人接受这些建议，移动评论来回答：

• 我建议不要在jQuery中使用内联

  onclick=

  处理程序。它们无缘无故地将事件处理程序与事件代码分开，并且不允许jQuery事件处理程序的额外功能
• 对DOM元素属性使用

  prop

  而不是

  attr

  （如禁用）。这还有一个额外的优点，就是采用

  布尔值

• 然后，您只需使用

  ！控制禁用状态的

  （因为您只检查0）
• 作为一个好习惯，总是选择DOM元素一次并保存选择器

e、 g

---

jsiddle:

最简单的方法是使用DOM在元素中导航并获取其当前值，然后增加/减少它们

我对代码进行了扩展，以确保在单击减号按钮时，值不会降低到零以下

jQuery（文档）.ready（函数（）{
//此按钮将增加值
$（'.qtyplus'）。单击（函数（e）{
//别像个按钮似的
e、 预防默认值（）；
//获取字段名
fieldName=$（this.attr（'field'）；
//获取其当前值
var currentVal=parseInt（$（'input[name='+fieldName+']'）.val（））；
//如果不是未定义的
如果（！isNaN（currentVal））{
//增量
$（'input[name='+fieldName+']'）.val（currentVal+1）；
}否则{
//否则，在那里放一个0
$（'input[name='+fieldName+']'）.val（0）；
}
});
//此按钮将使该值递减至0
$（“.qtyminus”）。单击（函数（e）{
//别像个按钮似的
e、 预防默认值（）；
//获取字段名
fieldName=$（this.attr（'field'）；
//获取其当前值
var currentVal=parseInt（$（'input[name='+fieldName+']'）.val（））；
//如果它不是未定义的或大于0
如果（！isNaN（currentVal）&¤tVal>0）{
//减量一
$（'input[name='+fieldName+']'）.val（currentVal-1）；
}否则{
//否则，在那里放一个0
$（'input[name='+fieldName+']'）.val（0）；
}
});
});

+
_
var a=0；
函数myfun（）{
a++；
document.getElementById（'pluse'）。value=a；
//document.getElementById（'pluse'）.innerHTML=a；
}
函数myfun1（）{
a——；
document.getElementById（'pluse'）。value=a；
}

你有错误的表达式，

=>

应该被

=

@BhojendraNepal纠正，仍然是同样的问题。你的代码工作正常，但是我建议不要在jQuery中使用内联

onclick=

处理程序，并对属性使用

prop

和

attr

：还有

if（a=>1）{

是不必要的，因为值永远不能低于0谢谢大家的回答，但当我尝试使用提供的小提琴时，我发现它在小提琴上工作，但与我在项目中遇到的问题相同。当我将函数重命名为项目中不存在的任何内容时，更新代码似乎工作。@Gonecoding再见，谢谢。我只是将其作为习惯..但它确实不在这里使用上述代码在警报时给出正确的值，但在输入字段中以2递增的方式显示值。您的解决方案对2的问题很有效，但最初我有value=“”，当我最初单击“减法”按钮时，输入字段显示-1。@user3518741:这是一个固有的问题，到目前为止，所有的解决方案都会出现此问题，因为没有初始检查来禁用该按钮。答案已更新，以包括初始设置/清除禁用状态。@user3518741:初始值低于零的情况仍然存在I’我允许单击一次减号，但鉴于您的系统有多个房间，初始负值似乎不太可能：）我会在qtyplus按钮函数的else分支中将该值设置为1，而不是0。当按下加号按钮时，从1开始更有意义，之前没有值。请用ans给出一些解释嗯，这是怎么回事。

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");
    }
};

<input type="button" value="-" id="subs" onclick="subst()" disabled>
 <input type="text" id="noOfRoom">
<input type="button" value="+" id="adds" onclick="add()">



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

alert(a);
$("#noOfRoom").val(a);
}

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

}

$('#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);
    }
});

<button onClick="myfun()">+</button>
<!--<button onClick="myfun()" id="pluse">+</button>-->
<input type="text" id="pluse" >
<button onClick="myfun1()">_</button>


var a = 0;
function myfun(){
    a++;
    document.getElementById('pluse').value = a;
    //document.getElementById('pluse').innerHTML = a;
}
function myfun1(){
    a--;
    document.getElementById('pluse').value = a;
}