多个增量和减量jquery仍不工作

cwxwcias 于 2021-09-13 发布在 Java

关注(0)|答案(4)|浏览(284)

我正在研究数量特征。在某些部分，它需要超过1个数量。我已经做了1个数量，效果很好。但是当我有一个多重数量时，它就不起作用了。当我单击其中一个按钮时，其他按钮也会受到影响。
我一直在试图找到这个问题的解决方案，但没有任何东西符合我创建的代码。有人能帮我吗？

$(document).ready(function() {
    let $input = $(".quantity__value");

    $(".quantity__trigger").click(function(){
      if ($(this).hasClass('quantity__increment'))
          $input.val(parseInt($input.val())+1);
      else if ($input.val()>=1)
          $input.val(parseInt($input.val())-1);
    });
});

.table__checkout__body--qty{
  margin-bottom:20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="table__checkout__body--qty">
  <div class="wrapper">
    <div class="quantity__base">
       <button class="quantity__decrement quantity__trigger">-</button>
       <input type="text" class="quantity__value" value="0" readonly>
       <button class="quantity__increment quantity__trigger">+</button>
    </div>
  </div>
</div>

<div class="table__checkout__body--qty">
  <div class="wrapper">
    <div class="quantity__base">
       <button class="quantity__decrement quantity__trigger">-</button>
       <input type="text" class="quantity__value" value="0" readonly>
       <button class="quantity__increment quantity__trigger">+</button>
    </div>
  </div>
</div>

<div class="table__checkout__body--qty">
  <div class="wrapper">
    <div class="quantity__base">
       <button class="quantity__decrement quantity__trigger">-</button>
       <input type="text" class="quantity__value" value="0" readonly>
       <button class="quantity__increment quantity__trigger">+</button>
    </div>
  </div>
</div>

jquery JavaScript Html

来源：https://stackoverflow.com/questions/68480899/multiple-increment-decrement-quantity-jquery-still-not-working

4条答案

按热度按时间

dm7nw8vv1#

问题是 let $input = $(".quantity__value"); 将始终选择所有输入，因为所有输入都具有该类。您需要为输入提供单独的ID，并将其作为参数传递给函数。以下是一个例子：

function change_quantity (id, value) {
  let $input = $("#" + id);
  $input.val(parseInt($input.val()) + value);
}

.table__checkout__body--qty{
  margin-bottom:20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="table__checkout__body--qty">
  <div class="wrapper">
    <div class="quantity__base">
       <button onclick="change_quantity ('input_0', -1)" class="quantity__decrement quantity__trigger">-</button>
       <input id="input_0" type="text" class="quantity__value" value="0" readonly>
       <button onclick="change_quantity ('input_0', +1)" class="quantity__increment quantity__trigger">+</button>
    </div>
  </div>
</div>

<div class="table__checkout__body--qty">
  <div class="wrapper">
    <div class="quantity__base">
       <button onclick="change_quantity ('input_1', -1)" class="quantity__decrement quantity__trigger">-</button>
       <input id="input_1" type="text" class="quantity__value" value="0" readonly>
       <button onclick="change_quantity ('input_1', +1)" class="quantity__increment quantity__trigger">+</button>
    </div>
  </div>
</div>

<div class="table__checkout__body--qty">
  <div class="wrapper">
    <div class="quantity__base">
       <button onclick="change_quantity ('input_2', -1)" class="quantity__decrement quantity__trigger">-</button>
       <input id="input_2" type="text" class="quantity__value" value="0" readonly>
       <button onclick="change_quantity ('input_2', +1)" class="quantity__increment quantity__trigger">+</button>
    </div>
  </div>
</div>

赞(0）回复(0）举报 2021-09-13

6qfn3psc2#

您可以尝试以下代码：

$(document).ready(function() {

     $(".quantity__trigger").click(function(){

         let input = $(this).closest('.quantity__base').find('input');

         if ($(this).hasClass('quantity__increment'))
             $(input).val(parseInt($(input).val())+1)
         else if( parseInt($(input).val()) >= 1  )
             $(input).val(parseInt($(input).val())-1);

      });
  });

赞(0）回复(0）举报 2021-09-13

wlwcrazw3#

在单击框内，您需要重新找到相关的/相关的 .quantity__value 而不是在点击之外得到一次

$(".quantity__trigger").click(function() {
  var $input = $(this).closest(".wrapper").find(".quantity__value");

更新的代码段：

$(document).ready(function() {
    //let $input = $(".quantity__value");

    $(".quantity__trigger").click(function(){
      var $input = $(this).closest(".wrapper").find(".quantity__value");
      if ($(this).hasClass('quantity__increment'))
          $input.val(parseInt($input.val())+1);
      else if ($input.val()>=1)
          $input.val(parseInt($input.val())-1);
    });
});

.table__checkout__body--qty{
  margin-bottom:20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="table__checkout__body--qty">
  <div class="wrapper">
    <div class="quantity__base">
       <button class="quantity__decrement quantity__trigger">-</button>
       <input type="text" class="quantity__value" value="0" readonly>
       <button class="quantity__increment quantity__trigger">+</button>
    </div>
  </div>
</div>

<div class="table__checkout__body--qty">
  <div class="wrapper">
    <div class="quantity__base">
       <button class="quantity__decrement quantity__trigger">-</button>
       <input type="text" class="quantity__value" value="0" readonly>
       <button class="quantity__increment quantity__trigger">+</button>
    </div>
  </div>
</div>

<div class="table__checkout__body--qty">
  <div class="wrapper">
    <div class="quantity__base">
       <button class="quantity__decrement quantity__trigger">-</button>
       <input type="text" class="quantity__value" value="0" readonly>
       <button class="quantity__increment quantity__trigger">+</button>
    </div>
  </div>
</div>

赞(0）回复(0）举报 2021-09-13

wlzqhblo4#

不要更改html，对jquery代码做任何您需要的事情，因为在许多项目中，您不能或没有权限更改html输出，所以我编写此代码是为了在不更改html输出的情况下解决您的问题，再加上更少的jquery代码，以便在客户端获得最佳性能
其他建议：
在此场景中不要使用输入类型文本
不要添加“readonly”元素以获得更好的用户体验

$(".table__checkout__body--qty").on('click','.quantity__trigger',function(){
   $input = $(this).siblings(".quantity__value");
  if ($(this).hasClass('quantity__increment'))
      $input.val(parseInt($input.val())+1);
  else if(parseInt($input.val())>0)
      $input.val(parseInt($input.val())-1);
});

.table__checkout__body--qty{
  margin-bottom:20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="table__checkout__body--qty">
  <div class="wrapper">
    <div class="quantity__base">
       <button class="quantity__decrement quantity__trigger">-</button>
       <input type="text" class="quantity__value" value="0" readonly>
       <button class="quantity__increment quantity__trigger">+</button>
    </div>
  </div>
</div>

<div class="table__checkout__body--qty">
  <div class="wrapper">
    <div class="quantity__base">
       <button class="quantity__decrement quantity__trigger">-</button>
       <input type="text" class="quantity__value" value="0" readonly>
       <button class="quantity__increment quantity__trigger">+</button>
    </div>
  </div>
</div>

<div class="table__checkout__body--qty">
  <div class="wrapper">
    <div class="quantity__base">
       <button class="quantity__decrement quantity__trigger">-</button>
       <input type="text" class="quantity__value" value="0" readonly>
       <button class="quantity__increment quantity__trigger">+</button>
    </div>
  </div>
</div>

赞(0）回复(0）举报 2021-09-13

我来回答

多个增量和减量jquery仍不工作

4条答案

相关问题

热门标签

最新问答