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{ 
 
\t width: 35%; 
 
\t float: left; 
 
} 
 
#sinolo input{ 
 
\t width: 45%; 
 
\t border: none; 
 
\t text-align: center; 
 
} 
 
#sinolo button{ 
 
\t width: 25%; 
 
\t font-size: 10px; 
 
\t 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

的问题是，++（该increment operator）的行为不同，这取决于它是否是之前还是有问题的变量后（-- decrement operator是一样的）。放置在变量之后，就像你拥有的那样，它意味着“给我变量的值，然后增加一个”。放置在变量之前（例如++x），它意味着“增加变量的值，然后给我新值”。

因为您在做x++或x--，您将获得变量之前的值的操作。使用++x和--x，您的代码将正常工作。

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

#sinolo{ 
 
\t width: 35%; 
 
\t float: left; 
 
} 
 
#sinolo input{ 
 
\t width: 45%; 
 
\t border: none; 
 
\t text-align: center; 
 
} 
 
#sinolo button{ 
 
\t width: 25%; 
 
\t font-size: 10px; 
 
\t 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 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{ 
 
\t width: 35%; 
 
\t float: left; 
 
} 
 
#sinolo input{ 
 
\t width: 45%; 
 
\t border: none; 
 
\t text-align: center; 
 
} 
 
#sinolo button{ 
 
\t width: 25%; 
 
\t font-size: 10px; 
 
\t 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

Remeber如何 - 和++运算符的工作，如果你把他们你在事后更新，让你改变输入值之后修改的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); 
    });