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. 如果我按下+(加号)按钮然后按 - (减号)按钮,则该过程无法正常工作.我能做什么？

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>