Rails Upvote AJAX無法正常工作

Question

因此，我的投票鏈接正在替換所有鏈接的投票計數器，而不是單個鏈接。 救命？

調節器

  def upcount
    @category = Category.find(params[:id])
    @category.upcount
    @category.save
    respond_to do |format|
      format.html {redirect_to categories_path(@category)}
      format.js
    end
  end

視圖

  <% @categories.each do |category| %>
  <div class="col-md-3 col-sm-6 hero-feature">
    <div class="thumbnail">
      <%= image_tag category.image.url(:large) %>
      <div class="caption">
        <%= category.name %> - <%= category.quote %></p>
        <%= link_to "Upvote", upcount_category_path(category), method: "put", remote: true %>
        <div id="total-votes">
          <%= category.count %>
        </div>
      </div>
    </div>
  </div>
  <% end %>

Upcount.js.erb

$("#total-votes").html("<%= @category.count %>")

單擊第二個鏈接將把第一個和第二個鏈接替換為15。感謝您的幫助。 謝謝！

Answer 1

HTML ID是唯一的。 您重復填寫的“投票總數” ID導致HTML無效。 這也使您的JavaScript感到困惑，因為它不知道您要定位的div。

您可以通過將類別ID添加到html ID來解決此問題，例如total-votes-<%= category.id %> ，這樣它對於所有人來說都是唯一的。

完整示例：

查看文件

<% @categories.each do |category| %>
  <div class="col-md-3 col-sm-6 hero-feature">
    <div class="thumbnail">
      <%= image_tag category.image.url(:large) %>
      <div class="caption">
        <%= category.name %> - <%= category.quote %></p>
        <%= link_to "Upvote", upcount_category_path(category), method: "put", remote: true %>
        <div id="total-votes-<%= category.id %>">
          <%= category.count %>
        </div>
      </div>
    </div>
  </div>
  <% end %>

Upcount.js.erb

$("#total-votes-<%= @category.id %>").html("<%= @category.count %>")