Javascript Rails 4最佳位置gem显示问题与遍历列表

我随后为我的应用程序的购物车安装了，现在能够成功地在线更新商品的数量，并使用ajax成功绑定更新包含购物车中该商品总价的div。然而，我有一个奇怪的显示问题，当我尝试遍历购物车中的全部项目列表时会出现这个问题

当用户首次登录购物车时，他们会看到以下内容：

尝试更新任一项目的数量时；但是，每行项目将显示两列。第一列（两行中）包含与第一个项目的合计值匹配的字段，两行中的第二列对第二个项目的合计值执行相同的操作：

如果第二个项目的数量发生变化，该项目将继续正确更新；但是，这两个问题是：1）散乱的项目不应该在它所在的位置，2）与项目2在同一行上的正确项目不会更新。

下面是相关的代码示例，提前感谢

行项目控制器.rb

---

我们能够解决这个问题。这个问题与需要为每个div创建唯一的id有关。这是通过在div id本身中使用行_item id来实现的

购物车/show.html.erb

---

在屏幕上显示不需要的总数时，右键单击元件并选择

检查元件

。这可能会给出意外输出的来源。发布相关的html。@Beartech我用一些新代码和屏幕截图更新了这个问题，因为我将total line的id更改为一个类。即使如此，检查元素只会在每一行中产生两个行项合计类。那么web服务器日志呢？我的想法是，你正在启动JS，或者它以某种方式进行了两次调用，因此是额外的项，或者它是更新div的部分。我对AJAX很糟糕，所以我很难理解这里发生了什么。通常我会使用AJAX调用另一个JS，使用另一个部分更新

div

，但看起来您是在直接更新元素？抱歉，在这里尝试学习并回答：：-）

class LineItemsController < ApplicationController
  respond_to :html, :json 

  ...

  def update
    @line_item = LineItem.find(params[:id])
    @line_item.update_attributes(line_item_params)  
    respond_with @line_item
  end
end

<% @shopping_cart.line_items.each do |line_item| %>

  <div class="row">
    <div class="small-6 columns">
      <%= line_item.meal.name %> 
    </div>

    <div class="small-3 columns">
      <%= best_in_place line_item, :quantity, :as => :select, :collection => {"1" => 1, "2" => 2, "3" => 3, "4" => 4, "5" => 5} %>
    </div>

    <div class="small-3 columns line-item-total">
        <%= number_to_currency(line_item.total_price) %>
    </div>
  </div>

<% end %>

$(function() {
  jQuery(".best_in_place").bind("ajax:success", function(data) {
    $(".line-item-total").load(location.href + " .line-item-total");
  });
});

<% @shopping_cart.line_items.each do |line_item| %>

    <div class="small-6 columns">
      <%= line_item.meal.name %> 
    </div>

    <div class="small-3 columns">
      <%= best_in_place line_item, :quantity, :as => :select, :collection => {"1" => 1, "2" => 2, "3" => 3, "4" => 4, "5" => 5} %>
    </div>

    <div id="line-item-total-<%= line_item.id.to_s %>-container" >
      <div class="small-3 columns" id="line-item-total-<%= line_item.id.to_s %>">
   </div>

<% end %>

$(function() {
  jQuery(".best_in_place").bind("ajax:success", function(data) {
    id = $(data.currentTarget).data().id;
    $("#line-item-total-" + id + "-container").load(location.href + " #line-item-total-" + id);
    $("#cart-calculations").load(location.href + " #cart-calculations");  
  });
});