Question

我有多个qty字段的表单，我想添加数量，但是按下添加按钮并按下减号按钮减去数量，我让它工作了一个但我不能让它适用于多个数字字段，我有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转换为类，并使用fieldset对HTML中的元素进行分组：


<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-ready函数（基于现有代码）

$(".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);
    });
});

使用jquery更改数量字段的值

4 个答案:

第1步

第2步