Question

{% for product in products %}
...
         <form class="form-inline">
              <div class="input-group">
                 <input type="hidden" name="productId" id="productId" value="{{product.id}}">
                 <input type="text" class="form-control" name="productQuantity" id="productQuantity" style="width: 40px; height: 40px;" placeholder="1">
                 <div class="input-group-append">
                     <button type='button' name="addToCart" id="addToCart" value="+" class="btn btnother"><i class="fas fa-plus fa-sm" style="color: white;"></i></button>
                 </div>
             </div>
        </form>   
...
{% endfor %}

这是简化的代码！

因此，我有一个电子商务Django网站。在主页上，我代表了不同产品的卡片，可以将其添加到购物车中。

每次有人将商品添加到购物车时，我只想更新标题中的购物车图片。因此，我想使用AJAX将productId和productQuantity传递给我的views.py。

这是我的JS：

$(document).ready(function(){
  $('form').click(function() {

    var productId = $('#productId').val();
    var productQuantity = $('#productQuantity').val();

    if (Number.isInteger(Number(productQuantity))){
      productQuantity = productQuantity;
    } else {
      productQuantity = 1;
    }
  
    $.ajax({
      url: 'update',
      type: 'post',
      cache: false,
      data: { 'productId' : productId,
              'productQuantity' : productQuantity }
    });

  });
});

但是，当我将其添加到购物车时，所有产品上打印的productId都是相同的。我认为是因为在for loop之后仅存储了最后一个productId

如何获取每个元素的ID？

Answer 1

由于每个form都有一个productId，因此您可以在获取productId的值时指定范围，可以使用以下代码仅在当前范围内找到productId form：

var productId = $(this).find('#productId').val();

获取html元素中循环的ID

1 个答案: