jQuery - 按钮增加和减少输入值

Question

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我可以看到两个问题。

1. 在按下按钮开始时，过程延迟，并通过第二次点击开始计数。

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

Answer 1

问题是++（increment operator）的行为会有所不同，具体取决于它是在有问题的变量之前还是之后（-- decrement operator是相同的）。放在变量之后，就像你拥有的那样，它意味着＆＃34;给我变量的值，然后将它增加一个＆＃34;。放在变量之前（例如++x），表示＆＃34;增加变量的值，然后给我新的值＆＃34;。

因为您正在执行x++或x--，所以您在获取之前的变量值。使用++x和--x，您的代码就可以正常使用。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>

Answer 3

记住 - 和++运算符是如何工作的，如果你在事后更新之后放置它们，那么在更改输入值后修改x的值，所以只需将它们放在< / p>

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