Ajax在更新一个表格单元格时更新整个列

Question

我正在使用带有upvote按钮的AJAX。当用户点击“UpVote”按钮时，应该提交它的表单并显示禁用的按钮“Upvoted”。

现在upvoting工作正常，但是当它发生时，它会将列中的每个'UpVote'按钮更改为upvoted，然后在页面上重新加载未投票的按钮返回'UpVote'按钮。（奇怪）：

<% @master_songs.each do |master_song| %>
    <td><div id="upvote-form">
          <% unless current_user.up_voted_song?(master_song) %>
              <%= render 'upvote', :master_song => master_song %>
          <% else %>
              <%= render 'upvoted' %>
          <% end %>
        </div></td>
  <% end %>

song_up_votes.js.erb是这样的：

$("div#upvote-form").html("<%= escape_javascript(render('fan_bases/upvoted')) %>")

并且应该为单行而不是整列更改上面的div。

我该如何解决这个问题？任何提示/帮助都非常感谢。

Answer 1

看起来你所有的div都具有相同的'upvote-form'id。因此，选择器“div＃upvote-form”正在选择所有upvote btns进行替换。给每个div一个唯一的id，这应该可以解决你的问题。