jquery - why the value is not serial in the same input

Question

I wanna increase and decrease the price function in input element.

I almost done, but I found a problem now, when I changed the price directly by keyboard, and then I cliked the arrowUp or arrowDown, the value is not serial.

*{
  margin: 0;
  padding: 0;
}
.wrap {
  position: relative;
}
.input{
  width: 200px;
  height: 50px;
}
i {
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}

<div class="wrap">
<input class="input" type="text" value='1' />
<i class="plus">+</i>
<i class="minus">-</i>
</div>

var input = $('.input'),
val = parseFloat($('.input').val()),
plus = $('.plus'),
minus = $('.minus');

    plus.on('mousedown', function(){
        input.val(++val);
        if(val > 10) { alert('hi'); }
    });
    minus.on('mousedown', function(){
        input.val(--val);
        if(val > 10) { alert('hi'); }
    });
    input.on('change', function(){
        var $this = $(this);
        if($this.val() > 10) { alert('hi'); }
    })

CodePen

Answer 1

将此添加到您的 JavaScript。

input.on("keyup", function(){
  val = Number(input.val());
});

您的变量只能通过按下按钮来更新，但您还希望在用户更改值时更新它。

演示

Answer 2

是的，您在加载第一页时获得原始编号。你应该从事件调用中得到。

只需val = parseFloat($('.input').val())输入回调plus.on('mousedown', function(){...}

在这里查看 JS fiddle。 http://jsfiddle.net/WJakG/1/