javascript - jQuery 函数在存在多个目标时停止工作，但在只有一个目标时工作

Question

我试图在数量更改为零时验证我的购物车，因为当 html 等于零时我基本上隐藏了减号图标，每当我的购物车中有一件商品时它就会工作，但当有一件商品时它就会停止工作是多个项目，有人知道这是为什么吗？

在我的 Blade 文件中，每个项目都有这个

<td data-th="Quantity">
  <i class="fa fa-minus-circle" data-id="{{$id}}"></i> <span class="quantity-val quantity-{{$id}}">{{ $details['quantity'] }} </span> <i class="fa fa-plus-circle" data-id="{{$id}}"></i> 
</td>

在我的 JS 文件中我有这个函数

$(document).ready(function () {
            initialQuantity = $('.quantity-val').text();

            if(initialQuantity == 0){
                $(".fa-minus-circle").hide();
            }

        });

有谁知道这是为什么吗？

Answer 1

您应该使用.each()循环遍历每个相应的单元格，并且 .siblings()检索相应的“减号”图标:

$(document).ready(function() {
  $('.quantity-val').each(function() {
    var initialQuantity = parseInt($(this).text());
    if (initialQuantity === 0) {
      $(this).siblings('.fa-minus-circle').hide();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

<table>
  <tr>
    <td data-th="Quantity">
      <i class="fa fa-minus-circle" data-id="1"></i> <span class="quantity-val quantity-1">10</span> <i class="fa fa-plus-circle" data-id="1"></i>
    </td>
  </tr>
  <tr>
    <td data-th="Quantity">
      <i class="fa fa-minus-circle" data-id="2"></i> <span class="quantity-val quantity-1">0</span> <i class="fa fa-plus-circle" data-id="2"></i>
    </td>
  </tr>
</table>