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