jQuery - 通过按钮增减输入框的值

Question

var x = 1;
$("#sinolo input").attr('value', x);
$("#inc").click(function(){
  $("#sinolo input").attr('value', x++);
});
$("#dec").click(function(){
  $("#sinolo input").attr('value', x--);
});

#sinolo{
 width: 35%;
 float: left;
}
#sinolo input{
 width: 45%;
 border: none;
 text-align: center;
}
#sinolo button{
 width: 25%;
 font-size: 10px;
 padding: 8px 0px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="sinolo">
  <button id="dec" class="btn btn-info fa fa-minus pull-left"></button>
  <input type="text" name="" value="">
  <button id="inc" class="btn btn-info fa fa-plus pull-right"></button>
</div>

您可以看到，我面临了两个问题。

1. 当我按下按钮时，开始处理延迟，并在第二次点击时开始计数。

2. 如果我按下“+”（加号）按钮，然后再按下“-”（减号）按钮，则过程无法正常工作。 我该怎么办？

- Vasilis Greece

Answer 1

问题在于++（增量运算符）的行为取决于它是在变量之前还是之后（-- 减量运算符也是一样）。当放置在变量之后时，就像你所做的那样，它的意思是“给我变量的值，然后将其增加一”。而当放置在变量之前时（例如++x），它的意思是“增加变量的值，然后给我新的值”。

因为你使用的是x++或x--，所以你得到的是操作前的变量值。使用++x和--x，你的代码将正常工作。

var x = 1;
 $("#sinolo input").attr('value', x);
     $("#inc").click(function(){
       $("#sinolo input").attr('value', ++x);
     });
     $("#dec").click(function(){
       $("#sinolo input").attr('value', --x);
     });

#sinolo{
 width: 35%;
 float: left;
}
#sinolo input{
 width: 45%;
 border: none;
 text-align: center;
}
#sinolo button{
 width: 25%;
 font-size: 10px;
 padding: 8px 0px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="sinolo">
  <button id="dec" class="btn btn-info fa fa-minus pull-left"></button>
  <input type="text" name="" value="">
  <button id="inc" class="btn btn-info fa fa-plus pull-right"></button>
</div>

- lonesomeday

Answer 2

您只需要使用前缀递增（--x和++x）而不是后缀递增（x--和x++），因为：

• 后缀递增（x++）：在处理当前语句后递增变量x的值。

• 前缀递增（++x）：在处理当前语句前递增变量x的值。

希望这能帮到您。

var x = 1;
$("#sinolo input").attr('value', x);
$("#inc").click(function(){
  $("#sinolo input").attr('value', ++x);
});
$("#dec").click(function(){
  $("#sinolo input").attr('value', --x);
});

#sinolo{
 width: 35%;
 float: left;
}
#sinolo input{
 width: 45%;
 border: none;
 text-align: center;
}
#sinolo button{
 width: 25%;
 font-size: 10px;
 padding: 8px 0px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="sinolo">
  <button id="dec" class="btn btn-info fa fa-minus pull-left"></button>
  <input type="text" name="" value="">
  <button id="inc" class="btn btn-info fa fa-plus pull-right"></button>
</div>

- Zakaria Acharki

Answer 3

记住 -- 和 ++ 运算符的工作方式，如果你把它们放在更新之后，那么你会在改变输入值后修改 x 的值，所以只需将它们放在之前即可。

var x = 1;
$("#sinolo input").attr('value', x);
    $("#inc").click(function(){
      $("#sinolo input").attr('value', ++x);
    });
    $("#dec").click(function(){
      $("#sinolo input").attr('value', --x);
    });

- nottu