javascript - 为每个点击事件的 <input> 值添加 + 1。增量在数字 3 处停止 Javascript/jQuery

Question

默认情况下，我的输入值为1，我想在每次单击按钮时添加+1。当达到 20 时停止添加。

我不明白为什么我的代码停在数字 3 处并且只是重复 3。

这是我的 HTML

<input type="hidden" id="total" value="20" /> //total num
<input type="hidden" id="cur_num" value="1" /> //current num
<button type="button" id="add" >Add</button>

这是 javascript 和演示 http://jsfiddle.net/zXpen/

$(document).ready(function() {
    $(document).on("click", "#add", function() {

        cur = $('#cur_num').val();
        total = $('#total').val();
        console.log(cur);

        if (cur <= total) {
            cur = parseInt(cur)+parseInt(1);
            $('#cur_num').val(cur);
        }
    });
});

Answer 1

.val()返回一个字符串，因此 cur <= total按字典顺序比较两个字符串，即每个位置的字符相互比较。和"2"在"20"小于 "3"在"3" .

您必须在比较值之前将它们转换为数字，而不是之后，例如通过使用一元加运算符。另外，不要忘记使用 var 声明变量。 :

var cur = +$('#cur_num').val();
var total = +$('#total').val();