как правильно сделать обработать событие на клик и изменение поля инпут?

Question

как одновременно проверять либо изменен .quantity_product либо .qnt-plus или .qnt-minus нужно считать data-id="15" и value="5"

<div class="prod-li-qnt-wrap">
   <p class="qnt-wrap prod-li-qnt">
      <a href="#" class="qnt-plus prod-li-plus change-arrow"><i class="icon ion-arrow-up-b"></i></a>
      <input class="quantity_product" type="text" data-id="15" value="5">
      <a href="#" class="qnt-minus prod-li-minus change-arrow"><i class="icon ion-arrow-down-b"></i></a>
   </p>
</div>

<div class="prod-li-qnt-wrap">
   <p class="qnt-wrap prod-li-qnt">
      <a href="#" class="qnt-plus prod-li-plus change-arrow"><i class="icon ion-arrow-up-b"></i></a>
      <input class="quantity_product" type="text" data-id="15" value="5">
      <a href="#" class="qnt-minus prod-li-minus change-arrow"><i class="icon ion-arrow-down-b"></i></a>
   </p>
</div>

Answer 1

data-id = let di = $that.attr('data-id');

Ниже использовал евент для всех инпутов, даже для динамических, лучше\можно так:

$('.quantity_product').on('input', ({currentTarget})=>{
    console.log(currentTarget.className, currentTarget.value);
    const $that = $(currentTarget);
    console.log($that.attr('class'), $that.attr('data-id'), $that.val());
});

$(document).on('input', 'input', ({currentTarget})=>{
    console.log(currentTarget.className, currentTarget.value);
    const $that = $(currentTarget);
    console.log($that.attr('class'), $that.val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="prod-li-qnt-wrap">
    <p class="qnt-wrap prod-li-qnt">
        <a href="#" class="qnt-plus prod-li-plus"><i class="icon ion-arrow-up-b"></i></a>
        <input class="quantity_product i1" type="text" data-id="15" value="5">
        <a href="#" class="qnt-minus prod-li-minus"><i class="icon ion-arrow-down-b"></i></a>
    </p>
</div>

<div class="prod-li-qnt-wrap">
    <p class="qnt-wrap prod-li-qnt">
        <a href="#" class="qnt-plus prod-li-plus"><i class="icon ion-arrow-up-b"></i></a>
        <input class="quantity_product i2" type="text" data-id="15" value="5">
        <a href="#" class="qnt-minus prod-li-minus"><i class="icon ion-arrow-down-b"></i></a>
    </p>
</div>

Answer 2

$(".quantity_product").on('input', function() {
if ($(this).val()) {
var obj = $(this);
change_product(obj);
}
});
$(".change-arrow").on('click', function() {
var obj = $(this);
obj = obj.siblings(".quantity_product");
if (obj.val()) {
change_product(obj);
}
});

Answer 3

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

Если да, то вот вариант на jQuery:

$('.prod-li-qnt-wrap').on('click', '.change-arrow', function(){ // Вешаем делегирование события клика на кнопки
  let parent = $(this).closest('.qnt-wrap'), // Находим родителя
      input = parent.find('.quantity_product'), // Находим инпут
      val = Number(input.val()), // Получим значение инпута
      id = input.attr('data-id'); // Получим data-id инпута
      
  if($(this).hasClass('qnt-plus')) { // Если нажат qnt-plus
    val++;
  } else if($(this).hasClass('qnt-minus')) { // Если нажат qnt-minus
    val--;
  }
  input.val(val); // Возвращаем значение в инпут
  console.info(id, val);
  //
  return false; // Т.к. нажатая кнопка - ссылка, отменим действие ссылки
}).on('change', '.quantity_product', function(){ // Вешаем ещё такое же событие на изменение инпута
  let val = $(this).val(), // Получаем значение инпута
      id = $(this).attr('data-id'); // Получаем его data-id
  console.info(id, val);
});

.icon::before {
  display: inline-block;
  font-size: 20px;
  color: #000;
  text-decoration: none;
}

.icon.ion-arrow-up-b::before {
  content: '↑';
}

.icon.ion-arrow-down-b::before {
  content: '↓';
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="prod-li-qnt-wrap">
   <p class="qnt-wrap prod-li-qnt">
      <a href="#" class="qnt-plus prod-li-plus change-arrow"><i class="icon ion-arrow-up-b"></i></a>
      <input class="quantity_product" type="text" data-id="15" value="5">
      <a href="#" class="qnt-minus prod-li-minus change-arrow"><i class="icon ion-arrow-down-b"></i></a>
   </p>
</div>

<div class="prod-li-qnt-wrap">
   <p class="qnt-wrap prod-li-qnt">
      <a href="#" class="qnt-plus prod-li-plus change-arrow"><i class="icon ion-arrow-up-b"></i></a>
      <input class="quantity_product" type="text" data-id="15" value="5">
      <a href="#" class="qnt-minus prod-li-minus change-arrow"><i class="icon ion-arrow-down-b"></i></a>
   </p>
</div>

С ограничением, чтобы не уйти в минус

$('.prod-li-qnt-wrap').on('click', '.change-arrow', function(){ // Вешаем делегирование события клика на кнопки
  let parent = $(this).closest('.qnt-wrap'), // Находим родителя
      input = parent.find('.quantity_product'), // Находим инпут
      val = Number(input.val()), // Получим значение инпута
      id = input.attr('data-id'); // Получим data-id инпута
      
  if($(this).hasClass('qnt-plus')) { // Если нажат qnt-plus
    val++;
  } else if($(this).hasClass('qnt-minus')) { // Если нажат qnt-minus
    val--;
    if(val < 0) val = 0;
  }
  input.val(val); // Возвращаем значение в инпут
  console.info(id, val);
  //
  return false; // Т.к. нажатая кнопка - ссылка, отменим действие ссылки
}).on('change', '.quantity_product', function(){ // Вешаем ещё такое же событие на изменение инпута
  let val = Number($(this).val()), // Получаем значение инпута
      id = $(this).attr('data-id'); // Получаем его data-id
  val = val < 0 ? 0 : val;
  $(this).val(val);
  console.info(id, val);
});

.icon::before {
  display: inline-block;
  font-size: 20px;
  color: #000;
  text-decoration: none;
}

.icon.ion-arrow-up-b::before {
  content: '↑';
}

.icon.ion-arrow-down-b::before {
  content: '↓';
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="prod-li-qnt-wrap">
   <p class="qnt-wrap prod-li-qnt">
      <a href="#" class="qnt-plus prod-li-plus change-arrow"><i class="icon ion-arrow-up-b"></i></a>
      <input class="quantity_product" type="text" data-id="15" value="5">
      <a href="#" class="qnt-minus prod-li-minus change-arrow"><i class="icon ion-arrow-down-b"></i></a>
   </p>
</div>

<div class="prod-li-qnt-wrap">
   <p class="qnt-wrap prod-li-qnt">
      <a href="#" class="qnt-plus prod-li-plus change-arrow"><i class="icon ion-arrow-up-b"></i></a>
      <input class="quantity_product" type="text" data-id="15" value="5">
      <a href="#" class="qnt-minus prod-li-minus change-arrow"><i class="icon ion-arrow-down-b"></i></a>
   </p>
</div>

С ограничением в атрибутах, аналогично min и max в input[type="number"]

$('.prod-li-qnt-wrap').on('click', '.change-arrow', function(){ // Вешаем делегирование события клика на кнопки
  let parent = $(this).closest('.qnt-wrap'), // Находим родителя
      input = parent.find('.quantity_product'), // Находим инпут
      val = Number(input.val()), // Получим значение инпута
      id = input.attr('data-id'), // Получим data-id инпута
      min = Number(input.attr('data-min')),
      max = Number(input.attr('data-max'));
  if($(this).hasClass('qnt-plus')) { // Если нажат qnt-plus
    val++;
  } else if($(this).hasClass('qnt-minus')) { // Если нажат qnt-minus
    val--;
  }
  
  if(val >= max) val = max;
  if(val <= min) val = min;
  
  input.val(val); // Возвращаем значение в инпут
  console.info(id, val);
  //
  return false; // Т.к. нажатая кнопка - ссылка, отменим действие ссылки
}).on('change', '.quantity_product', function(){ // Вешаем ещё такое же событие на изменение инпута
  let val = Number($(this).val()), // Получаем значение инпута
      id = $(this).attr('data-id'), // Получаем его data-id
      min = Number($(this).attr('data-min')),
      max = Number($(this).attr('data-max'));
  
  if(val <= min) val = min;
  if(val >= max) val = max;
  
  $(this).val(val);
  console.info(id, val);
});

.icon::before {
  display: inline-block;
  font-size: 20px;
  color: #000;
  text-decoration: none;
}

.icon.ion-arrow-up-b::before {
  content: '↑';
}

.icon.ion-arrow-down-b::before {
  content: '↓';
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="prod-li-qnt-wrap">
   <p class="qnt-wrap prod-li-qnt">
      <a href="#" class="qnt-plus prod-li-plus change-arrow"><i class="icon ion-arrow-up-b"></i></a>
      <input class="quantity_product" type="text" data-id="15" data-min="0" value="5" data-max="10">
      <a href="#" class="qnt-minus prod-li-minus change-arrow"><i class="icon ion-arrow-down-b"></i></a>
   </p>
</div>

<div class="prod-li-qnt-wrap">
   <p class="qnt-wrap prod-li-qnt">
      <a href="#" class="qnt-plus prod-li-plus change-arrow"><i class="icon ion-arrow-up-b"></i></a>
      <input class="quantity_product" type="text" data-id="15" data-min="-5" value="5" data-max="5">
      <a href="#" class="qnt-minus prod-li-minus change-arrow"><i class="icon ion-arrow-down-b"></i></a>
   </p>
</div>

БЛОГ НА HUSL

как правильно сделать обработать событие на клик и изменение поля инпут?

Ответы (3 шт):