javascript - 属性未传递给购物车商品的 AJAX 调用

Question

我是 AJAX 新手。我有以下 Ajax 调用， View 如下:

:javascript
$(function(){
    $('.select').change(function(){
    $.ajax({
        url: "#{update_cart_path(format: :js)}",
        type: 'post',
        data: { quantity: $("select").val(), id: $("product").attr('id') },
        dataType: 'script',
    })
    });
});


.basket-items

- @products.each do |item|
    .row
        .col-xs-6.col-md-4
            = image_tag item[:image], class: 'img-responsive'
        .col-xs-4.col-md-4
            = item[:name]
        .col-xs-4.col-md-2.select
            = select_tag :quantity, options_for_select((1..10), item[:quantity])
        .col-xs-4.col-md-2
            %span.total-item{'data-widget' => 'summary-total-item'}= to_pounds(item[:total_amount])
        %product{style: "display: none;", :id => item[:id]}

当购物篮中只有一种产品/商品并且用户尝试更改数量时，AJAX 可以正常工作。但是，当用户将另一个/不同的产品添加到购物篮中并尝试更改添加的产品的数量时，由于某种原因，参数不会传递到 AJAX 调用中。调试时，传递的数据参数是第一个添加的产品，而不是第二个产品。

我在这里做错了什么？如何从正确的产品中传递正确的选择参数？

Answer 1

看起来您正在重新查询 select 元素，并且在提供数据时始终获取第一个元素。 jQuery val方法将为您提供所选列表中第一项的值。您可以使用 this 向 jQuery 提供上下文，以仅获取您想要的内容。

但是，这样做时，您需要查找最近的行，然后返回到 product 标记以查找该产品 ID。

尝试这样的事情:

:javascript
  $(function(){
    $('.select').change(function(){
      var quantity = $('select', this).val();
      var product_id = $('product', $(this).closest('.row')).attr('id');
      $.ajax({
        url: "#{update_cart_path(format: :js)}",
        type: 'post',
        data: { quantity: quantity, id: product_id },
        dataType: 'script',
      })
    });
  });

通过对更改监听器的放置位置更具策略性，或者使用数据属性将信息放置在更方便的位置，可以稍微清理一下。