触发事件侦听器时应用输入值

Question

我有两个跨度的输入 "buttons":

 <label class="label1" for="adults">Adults:</label>
 <span class="plus"></span>
 <input type="text" id="adults" value="0">
 <span class="minus"></span>

简单 JS 适用于 console.log() 但不会将该值应用于实际输入值。 JS/JQuery 中有什么方法可以处理这个问题吗？

var adultsValue = $('#adults').val();

$('.plus').click(function () {
    if(adultsValue < 5) {
    adultsValue++;
    }
    console.log(adultsValue);
});

Answer 1

您是 re-assining 一个值，而不是更新当前字段的值。

带有一些修复的片段

存储元素 #adults 以避免每次都查找该元素。
将当前值转换为数字。
设置新的增量值。

var $adults = $('#adults');
$('.plus').click(function () {
    var val = Number($adults.val());
    if (val < 5) {
        $adults.val(++val);
    }

    console.log(val);
});

Answer 2

var adults = $('#adults')
var adultsValue = adults.val();

$('.plus').click(function () {
    if(adultsValue < 5) {
       adults.val(adultsValue + 1);
    }
    console.log(adultsValue);
});

触发事件侦听器时应用输入值

Applying input value when event listener was triggered

javascript

jquery

input

event-listener