Выберите правильное поле ввода

Question

Может быть, я работаю слишком долго, но я не могу понять это или, может быть, я больше не вижу этого;)

У меня есть несколько форм на одной странице. В этих формах есть поле ввода со стрелками + и - для обновления количества.

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

Итак, что у меня есть это:

<form class="formProduct" name="form 1234" action=""/>
.... some fields.....

<div class="quantity 1234">
   <input type="text" name="quantity" value="1" />
    <div class="change">
      <a href="javascript:;" onclick="updateQuantity('up');" class="up">+</a>
      <a href="javascript:;" onclick="updateQuantity('down');" class="down">-</a>
    </div>
 </div>
</form>

<form class="formProduct" name="form 4321" action=""/>
.... some fields.....

<div class="quantity 4321">
   <input type="text" name="quantity" value="1" />
    <div class="change">
      <a href="javascript:;" onclick="updateQuantity('up');" class="up">+</a>
      <a href="javascript:;" onclick="updateQuantity('down');" class="down">-</a>
    </div>
 </div>
</form>

Jquery

  function updateQuantity(way){

    var quantity = parseInt($('.quantity input').val());

    if (way == 'up'){
      if (quantity < 10){
        quantity++;
          } else {
          quantity = 10;
      }
    } else {
      if (quantity > 2){
        quantity--;
          } else {
          quantity = 2;
      }
    }

    $('.quantity input').val(quantity);
  }

Я знаю, что должен использовать один из классов, таких как "1234" и "4321", чтобы выбрать правильное поле ввода. Но я действительно не могу заставить это работать. Я постоянно получаю ошибку [объект объекта].

Я что-то пропустил?

Answer 1

Поместите ключевое слово this в функцию onclick в качестве параметра и найдите ближайший вход по ключевому слову

    <script>
        function updateQuantity(item,way){

            var inputField = $(item).closest('.quantity').find('input');
            var quantity = parseInt(inputField.val(),10);

            if (way == 'up'){
              if (quantity < 10){
                quantity++;
                  } else {
                  quantity = 10;
              }
            } else {
              if (quantity > 2){
                quantity--;
                  } else {
                  quantity = 2;
              }
            }

            inputField.val(quantity);
          } 
        </script>

        <form class="formProduct" name="form 1234" action=""/>

        <div class="quantity 1234">
           <input type="text" name="quantity" value="1" />
            <div class="change">
              <a href="javascript:;" onclick="updateQuantity(this,'up');" class="up">+</a>
              <a href="javascript:;" onclick="updateQuantity(this,'down');" class="down">-</a>
            </div>
         </div>
        </form>

        <form class="formProduct" name="form 4321" action=""/>

        <div class="quantity 4321">
           <input type="text" name="quantity" value="1" />
            <div class="change">
              <a href="javascript:;" onclick="updateQuantity(this,'up');" class="up">+</a>
              <a href="javascript:;" onclick="updateQuantity(this,'down');" class="down">-</a>
            </div>
         </div>
        </form>

Answer 2

Используйте jquery closest(), чтобы найти ближайший родительский элемент div и найти элемент ввода, значение которого необходимо обновить. Например:

    function updateQuantity(item,way){
        var nearest = $(item).closest('.quantity').find('input');
        var quantity = parseInt(nearest.val(),10);

        if (way == 'up'){
          if (quantity < 10){
            quantity++;
              } else {
              quantity = 10;
          }
        } else {
          if (quantity > 2){
            quantity--;
              } else {
              quantity = 2;
          }
        }
        nearest.val(quantity);
    }

увидеть рабочую демоверсию jsfiddle

Answer 3

1. Смешивать встроенный JavaScript с jQuery не очень хорошая идея, старайтесь избегать этого.

2. Ваша логика имеет несколько недостатков и нацелена на все input элементы, происходящие из класса .quantity,

3. Всегда используйте radix когда используешь parseInt,

---

Измените HTML, чтобы сделать его чище:

<input type="text" name="quantity" value="1" />
... etc
<a href="" class="up">+</a>
<a href="" class="down">-</a>

Тогда просто используйте следующее:

$(".up, .down").click(function(e){
  e.preventDefault();
  var input = $(this).parent().prev("input");
  if(this.className === 'up') {
    input.val() < 10 ? input.val(parseInt(input.val(), 10) + 1) : input.val(10);
  } 
  else {
    input.val() >= 1 ? input.val(parseInt(input.val(), 10) - 1) : input.val(0);
  }   
});

jsFiddle здесь