измените значение поля количества с помощью jquery

Question

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

     <form>
            <input name="minus1" type="button" class="button" id="minus1" value=" - " />
            <input name="textfield1" type="text" id="textfield1" size="2" maxlength="2" value="0" />
           <input name="add1" type="button" class="button" id="add1" value=" + " />

           <input name="minus2" type="button" class="button" id="minus2" value=" - " />
            <input name="textfield2" type="text" id="textfield2" size="2" maxlength="2" value="0" />
           <input name="add2" type="button" class="button" id="add2" value=" + " />

         ......
     </form>

    $(function()
{

        $("#add1").click(function(){
        var newQty = +($("#textfield1").val()) + 1;
        $("#textfield1").val(newQty);
        });

        $("#minus1").click(function(){
        var newQty = +($("#textfield1").val()) - 1;
        if(newQty < 0)newQty = 0;
        $("#textfield1").val(newQty);
        });


});

Answer 1

Попробуйте назначить классы для входов. Тогда вам не нужно повторять скрипт x (24) раза

 <input name="minus1" type="button" class="button minus" value=" - " />
 <input name="textfield1" type="text" class="text" size="2" maxlength="2" value="0" />
 <input name="add2" type="button" class="button add" value=" + " />

 <input name="minus2" type="button" class="button minus" value=" - " />
 <input name="textfield2" type="text" class="text" size="2" maxlength="2" value="0" />
 <input name="add2" type="button" class="button add"  value=" + " />

JS

// N.B нужно убедиться, что ввод также числовой

$('input.add').live('click', function(){

    var $textInput = $(this).prev();
    $textInput.val( $textInput.val() + 1 );

});

$('input.minus').live('click', function(){

    var $textInput = $(this).next();
    var newQty = $textInput.val() - 1;
    newQty > 0 ? $textInput.val(newQty) : $textInput.val(0)

});

Answer 2

Почему бы не попробовать что-то вроде этого:

<form>
  <input name="textfield1" type="text" class="quantity" size="2" maxlength="2" value="0" />
  <input name="textfield2" type="text" class="quantity" size="2" maxlength="2" value="0" />
  <input name="textfield3" type="text" class="quantity" size="2" maxlength="2" value="0" />
  ...
  <input name="textfieldn" type="text" class="quantity" size="2" maxlength="2" value="0" />
</form>

...

$(document).ready(function() {
  $('input.quantity').each(function() {
    $field = $(this);
    $field.before(
      $('<input>').attr('type', 'button').val(' - ').bind('click', function() {
        var newVal = parseInt($field.val()) - 1;
        if (newVal < 0)
          newVal = 0;
        $field.val(newVal);
      })
    );
    $field.after(
      $('<input>').attr('type', 'button').val(' + ').bind('click', function() {
        var newVal = parseInt($field.val()) + 1;
        if (newVal < 0)
          newVal = 0;
        $field.val(newVal);
      })
    );
  });
});

Answer 3

Я предполагаю, что он хочет сгруппировать кнопки так, чтобы одна кнопка минус / плюс работала на одном поле и т. Д.

Ну, во-первых, я бы сделал id по классам и сгруппировал элементы в HTML, используя fieldset:

<form>
  <fieldset>
    <input name="minus1" type="button" class="button minus" value=" - " />
    <input name="textfield1" type="text" class="valfield" size="2" maxlength="2" value="0" />
    <input name="add1" type="button" class="button add" value=" + " />
  </fieldset>
  <fieldset>
    <input name="minus2" type="button" class="button minus" value=" - " />
    <input name="textfield2" type="text" class="valfield" size="2" maxlength="2" value="0" />
    <input name="add2" type="button" class="button add" value=" + " />
  </fieldset>
</form>

Тогда я бы заставил jquery работать с братьями и сестрами:

$(function()
{
  $(".add").click(function(){
    var newQty =+($(this).siblings(".valfield").val()) + 1;
    $(this).siblings(".valfield").val(newQty);
  });

  $(".minus").click(function(){
    var newQty = +($(this).siblings(".valfield").val()) - 1;
    if(newQty < 0)newQty = 0;
    $(this).siblings(".valfield").val(newQty);
  });
});

Надеюсь, что вы искали:)

Answer 4

попробуй parseInt ...

var newQty = parseInt($("#textfield1").val()) + 1;

хорошо, на самом деле это не имеет ничего общего с вашей проблемой ...

Шаг 1

добавить класс к каждому текстовому полю, вот так

<input class="incremental_text_field" name="textfield1" type="text" id="textfield1" size="2" maxlength="2" value="0" />

Шаг 2

просто добавьте этот цикл в функцию, готовую к DOM (на основе существующего кода)

$(".incremental_text_field").each(function() {
    field_number = $(this).attr("id").replace("textfield", "");

    $("#add" + field_number).click(function(){
        var newQty = +($("#textfield" + field_number).val()) + 1;
        $("#textfield" + field_number).val(newQty);
    });

    $("#minus" + field_number).click(function(){
        var newQty = +($("#textfield" + field_number).val()) - 1;
        if(newQty < 0) newQty = 0;
        $("#textfield" + field_number).val(newQty);
    });
});