У меня следующая проблема:

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

HTML:

<div>
   <a id="{$sArticle.articleID}" class="minus"><i class="icon-minus-wide"></i></a>
   
   <input class="quantityNum--input quantity{$sArticle.articleID}" name="sQuantity" 
   type="text" value="{$sArticle.minpurchase}">

   <a id="{$sArticle.articleID}" class="plus"><i class="icon-plus-wide"></i></a>
</div>

JS:

     $(document).on('click', ".plus", function (event) {
        let currentTarget = event.currentTarget;

        let idOfClickedElement = $(currentTarget).attr('id');

        let currentQuantity = Number($('.quantity' + idOfClickedElement).val());

        $(this).parent().find(".quantity" + idOfClickedElement).val(currentQuantity + 1)
    });

Есть и другие поля ввода, такие же, как в примере. Эти значения тоже меняются, но мне нужно только одно.

0
can.duendar 9 Окт 2021 в 18:15

3 ответа

Лучший ответ

Поскольку каждый ввод с +/- находится внутри оболочки div, вы можете использовать

$(this).closest("div").find(".quantityNum--input")

Чтобы получить соответствующий ввод.

При использовании относительного обхода DOM нет необходимости в числовых идентификаторах.

Объединение + и - в одно событие дает:

$(document).on('click', ".minus,.plus", function() {
  var delta = $(this).is(".plus") ? 1 : -1;
  $(this).closest("div").find(".quantityNum--input").val((i, val) => {
    console.log(val);
    return (val * 1) + delta;
  });
});
.minus,
.plus {
  cursor: pointer
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <a class="minus">[-]<i class="icon-minus-wide"></i></a>
  <input class="quantityNum--input" name="sQuantity" type="text" value="100">
  <a class="plus">[+]<i class="icon-plus-wide"></i></a>
</div>
<div>
  <a class="minus">[-]<i class="icon-minus-wide"></i></a>
  <input class="quantityNum--input" name="sQuantity" type="text" value="500">
  <a class="plus">[+]<i class="icon-plus-wide"></i></a>
</div>
1
freedomn-m 9 Окт 2021 в 15:39

Я думаю, вы ищете .next и .prev.

Примечание: мне нравится делиться информацией с использованием атрибутов данных, поэтому я использовал это. вы можете использовать что-нибудь еще id/class, чтобы различать. это зависит от тебя

Только что создал для вас демонстрационный скрипт

$('.number-action-button').on('click', function(){
  const direction = $(this).data('direction');
  if(direction === 'decrement'){
    const $input = $(this).next('input[type="number"]');
    $input.val($input.val() - 1);
  }

  if(direction === 'increment'){
    const $input = $(this).prev('input[type="number"]');
    $input.val(parseInt($input.val()) + 1);
  }
    
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="number-action-button"  data-direction="decrement">-</button>
<input type="number" value="0" />
<button class="number-action-button" data-direction="increment" >+</button>
0
Muhammad Usman 9 Окт 2021 в 15:31

Простое решение: объедините 3 элемента в 1 контейнер, чтобы родительский селектор мог легко улавливать ввод, как вы это уже делаете.

<div>
  <a id="{$sArticle.articleID}" class="minus"><i class="icon-minus-wide"></i></a>
   
   <input class="quantityNum--input quantity{$sArticle.articleID}" name="sQuantity" 
   type="text" value="{$sArticle.minpurchase}">

   <a id="{$sArticle.articleID}" class="plus"><i class="icon-plus-wide"></i></a>
</div>

Если вы не можете (или не хотите) изменять HTML, используйте $(this).next() (или $(this).prev() для кнопки «плюс»), чтобы найти ввод.

Кстати: может быть, вы попробуете эту функцию (не тестировал, но, по крайней мере, он должен дать вам представление, как это сделать)

$(document).on('click', ".plus,.minus", function (event) {
    let input_quantity=false;
    if($(this).hasClass('plus'){
        input_quantity=$(this).prev();
        input_quantity.val(parseInt(input_quantity.val())+1);
    }else{
        input_quantity=$(this).next();
        input_quantity.val(parseInt(input_quantity.val())-1);
    }
});
0
st'sahib 9 Окт 2021 в 15:34