Jquery неверное значение, полученное для текстового значения количества, когда я нажимаю на или - кнопку

#javascript #jquery #input #shopping-cart

#javascript #jquery #ввод #корзина покупок

Вопрос:

Неверное значение фиксируется для текстового значения количества, когда я нажимаю на - кнопку регулировки количества или корзины. Например, начальное значение количества со стороны сервера равно 4.

Когда я нажимаю плюс, пользовательский интерфейс отображается как 5, но в console.log нем значение считывается как устаревшее 4.

Если я попробую другой способ захвата нажатия клавиши, он сможет считывать значение только тогда, когда пользователь фактически переходит к взаимодействию с текстовым полем.

Интересно, как получить правильное конечное значение после нажатия кнопки…

 $(document).on('click', '.qty-control', function(event) {
  var cartid = $(this).attr("data-cartid");
  var qty = $('#qty_'   cartid).val();
  console.log(qty);
});

$(document).on('keyup change click', '.itemqty', function(event) {
  alert('trigger');
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="javascript:void(0)" class="qty-control left" data-click="decrease-qty" data-target="#qty_25" data-cartid="25">
  <i class="fa fa-minus">-</i>
</a>
<input type="number" name="qty" value="4" class="form-control itemqty" id="qty_25" min="0" placeholder="Qty">
<a href="javascript:void(0)" class="qty-control right" data-click="increase-qty" data-target="#qty_25" data-cartid="25">
  <i class="fa fa-plus"> </i>
</a>

1. В вашем примере значение никогда не изменяется, и консоль показывает правильное. Я не понимаю, в чем проблема

2. Думаю, я только что нашел ответ. Шаблон, который я использую, использует data-target=»# » для ссылки на идентификатор (который является вводом количества). Я полагаю, что сам шаблон добавил got build в событие jquery, увеличивающее значение, когда я нажимаю знак . Но оно не отобразит правильное значение, когда я захочу получить. Поэтому я просто удаляю data-target и теперь использую обычный способ.

Ответ №1:

Вам не хватает кода, который изменяет количество:

 var qtyChange = {'increase-qty': 1, 'decrease-qty': -1};
$(document).on('click', '.qty-control', function(event) {
  var cartid = $(this).attr("data-cartid");
  var qty = parseInt($('#qty_'   cartid).val())   qtyChange[$(this).data('click')];
  console.log(qty);
  $('#qty_'   cartid).val(qty);
});

$(document).on('keyup change click', '.itemqty', function(event) {
  alert('trigger');
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="javascript:void(0)" class="qty-control left" data-click="decrease-qty" data-target="#qty_25" data-cartid="25">
  <i class="fa fa-minus">-</i>
</a>
<input type="number" name="qty" value="4" class="form-control itemqty" id="qty_25" min="0" placeholder="Qty">
<a href="javascript:void(0)" class="qty-control right" data-click="increase-qty" data-target="#qty_25" data-cartid="25">
  <i class="fa fa-plus"> </i>
</a>