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

地点＆＃39;这个＆＃39; 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

将内联JavaScript与jQuery混合使用并不是一个好主意，请尽量避免使用。
您的逻辑存在一些缺陷，并且定位来自类input的所有.quantity元素。
使用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 here

Answer 3

使用jquery nearest（）查找最近的父div并找到其值必须更新的input元素。例如：

    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

选择正确的输入字段

3 个答案: