Jquery 选择正确的输入字段

也许我现在工作的时间太长了，但我想不出这个，或者我再也看不到了；）

我在一页上有多张表格。在这些表单中，有一个带有+和-箭头的输入字段，用于更新数量

我面临的问题是，我无法选择正确的输入字段，因此当我更新任何输入字段中的数量时，脚本将更新所有字段，而不是所选的字段

所以我得到的是：

<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);
  }

函数更新相等性（方式）{
var quantity=parseInt（$（'.quantity input'）.val（））；
如果（方式==“向上”）{
如果（数量<10）{
数量++；
}否则{
数量=10；
}
}否则{
如果（数量>2）{
数量--；
}否则{
数量=2；
}
}
$（'.quantity input'）.val（数量）；
}

我知道我必须使用像“1234”和“4321”这样的类来选择正确的输入字段。但我真的无法让它发挥作用。我经常会出现[对象]错误

---

我遗漏了什么吗？

将“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>

函数updateQuantity（项、方式）{
var inputField=$（项）。最近（'.quantity'）。查找（'input'）；
var quantity=parseInt（inputField.val（），10）；
如果（方式==“向上”）{
如果（数量<10）{
数量++；
}否则{
数量=10；
}
}否则{
如果（数量>2）{
数量--；
}否则{
数量=2；
}
}
inputField.val（数量）；
} 

将内联JavaScript与jQuery混合不是一个好主意，请尽量避免

您的逻辑有一些缺陷，并且针对从类

.quantity

派生的所有

输入

元素

使用

parseInt

时，始终使用

radix

---

修改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);
  }   
});

$（“.up，.down”）。单击（函数（e）{
e、 预防默认值（）；
var input=$（this.parent（）.prev（“input”）；
if（this.className==='up'）{
input.val（）<10？input.val（parseInt（input.val（），10）+1）：input.val（10）；
} 
否则{
input.val（）>=1？input.val（parseInt（input.val（），10）-1）：input.val（0）；
}   
});

使用jquery closest（）查找最近的父div并查找其值必须更新的输入元素。。 例：

function updatequality（项目、方式）{
变量最近=$（项）。最近（'.quantity'）。查找（'input'）；
var数量=parseInt（最接近的.val（），10）；
如果（方式==“向上”）{
如果（数量<10）{
数量++；
}否则{
数量=10；
}
}否则{
如果（数量>2）{
数量--；
}否则{
数量=2；
}
}
最近值。val（数量）；
}

---

请参阅工作演示

您的代码，以减少该值是可疑的。您正在测试大于2的值，但初始值为1。如果您先按下

向下

按钮，值将上升@迈克：如果我给你一个链接会有帮助吗？我不知道你到底是什么意思。。。

    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);
    }