使用关注/取消关注按钮对用户进行分页：由于类名重复，Ajax 遇到问题

Question

我的 users/show.html.erb 页面可以正常工作，因为每个页面上只显示一个类名。当用户在users/index.html.erb 和follow/unfollow buttons 中分页时，relationship/js.create.erb 和relationship/js.destroy.erb 会变得古怪，因为页面上有重复的类名，（第一个分页用户会更新，无论哪个用户被关注/取消关注，这只是刷新页面时自行修复（实际模型仍然可以正常工作）。

我没有在users/index.html.erb 中使用取消关注/关注部分，因为index.html.erb 中没有@user 变量，它对@users 进行分页，所以我使用user.id。

class RelationshipsController < ApplicationController
before_action :logged_in_user

def create
  @user = User.find(params[:followed_id])
    current_user.follow(@user)
    respond_to do |format|
      format.html { redirect_to @user }
      format.js
    end
  end

  def destroy
    @user = Relationship.find(params[:id]).followed
    current_user.unfollow(@user)
    respond_to do |format|
      format.html { redirect_to @user }
      format.js
    end
  end
end

**relationships/create.js.erb**
$("#follow_form").html("<%= escape_javascript(render('users/unfollow')) %>");
$("#followers").html('<%= @user.followers.count %> <br> followers');

**relationships/destroy.js.erb**
$("#follow_form").html("<%= escape_javascript(render('users/follow')) %>");
$("#followers").html('<%= @user.followers.count %> <br> followers');

**users/index.html.erb** 
<div class="row community">
  <% @users.in_groups_of(3, false).each do |users| %>
    <div class="col-sm-12">
      <% users.each do |user| %>
            <ul class="name-head">
              <% unless current_user == user %>
                <div id="follow_form">
                  <% if current_user.following?(user) %>
                    <%= form_for(current_user.active_relationships.find_by(followed_id: user.id),
                    html: { method: :delete }, remote: true) do |f| %>
                        <%= f.submit "Unfollow", class: "btn btn-primary" %>
                    <% end %>
                  <% else %>
                    <%= form_for(current_user.active_relationships.build, remote: true) do |f| %>
                      <div><%= hidden_field_tag :followed_id, user.id %></div>
                      <%= f.submit "Follow", class: "btn btn-primary" %>
                    <% end %>
                  <% end %>
                </div>
              <% end %>
            </ul>
          <div class="col-xs-12">
          <div class="col-xs-4">
            <a href="<%= following_user_path(user.id) %>">
              <center><strong id="following" class:"stat">
              <%= user.following.count %><br>
              following
              </strong></center>
            </a>  
          </div>
          <div class="col-xs-4">
            <a href="<%= followers_user_path(user.id) %>">
              <center><strong id="followers" class="stat">
                <%= user.followers.count %><br>
                followers
              </strong></center>
            </a>
          </div>
          <div class="col-xs-4">
              <center><strong id="photo-count" class="stat">
                <%= user.photos.count %><br>
              photos shared
              </strong></center>
          </div>
        </div>
        </div>  
      <% end %>
    </div>  
  <% end %>
</div>
<%= will_paginate %>

**users/show.html.erb** 
.
.
.
      <li class="follow">
        <%= render 'follow_form' if logged_in? %>
      </li>
    </ul>
  </div>
  <div class="col-xs-12">
    <div class="col-xs-4">
      <a href="<%= following_user_path(@user) %>">
        <center><strong id="following" class:"stat">
        <%= @user.following.count %><br>
        following
        </strong></center>
      </a>  
    </div>
    <div class="col-xs-4">
      <a href="<%= followers_user_path(@user) %>">
        <center><strong id="followers" class="stat">
          <%= @user.followers.count %><br>
        followers
        </strong></center>
      </a>
    </div>
    <div class="col-xs-4">
        <center><strong id="photo-count" class="stat">
          <%= @user.photos.count %><br>
        photos shared
        </strong></center>
    </div>
end

**_follow_form.html.erb**
<% unless current_user?(@user) %>
  <div id="follow_form">
  <% if current_user.following?(@user) %>
    <%= render 'unfollow' %>
  <% else %>
    <%= render 'follow' %>
  <% end %>
  </div>
<% end %>

**_follow.html.erb**
<%= form_for(current_user.active_relationships.build, remote: true) do |f| %>
  <div><%= hidden_field_tag :followed_id, @user.id %></div>
  <%= f.submit "Follow", class: "btn btn-primary" %>
<% end %>

**_unfollow.html.erb**
<%= form_for(current_user.active_relationships.find_by(followed_id: @user.id),
         html: { method: :delete },
         remote: true) do |f| %>
   <%= f.submit "Unfollow", class: "btn btn-primary" %>
 <% end %>

编辑：我想过将user_id传递给类，例如：

<div id="follow_form<%="#{user.id}"%>"> 

which created <div id="follow3">

但是我不知道如何将其传递给 destroy.js.erb 和 create.js.erb

I have tried many combinations such as:

 $("#follow_form<%="#{user.id}"%>").html("<%= escape_javascript(render('users/unfollow')) %>");

和

 $("#follow_form<%= @user.id%>").html("<%= escape_javascript(render('users/unfollow')) %>"); 

但是，代码仍然无法运行，即使它运行了，它仍然需要运行，因为更改 create/destroy.js.erb 文件会破坏 users/show.html.erb 关注/取消关注按钮。

编辑：我也发现了这个question，它很相似，但它不包含可接受的答案。

编辑 Heroku 日志：这是我在 users/index.html.erb 页面上关注/取消关注用户时得到的结果：

Started DELETE "/relationships/360" for 184.90.97.154 at 2016-05-13 20:05:17 +0000
Processing by RelationshipsController#destroy as JS
Rendered users/_follow.html.erb (1.6ms)
 (1.1ms)[0m  [1mSELECT COUNT(*) FROM "users" INNER JOIN "relationships" ON "users"."id" = "relationships"."follower_id" WHERE "relationships"."followed_id" = $1[0m  [["followed_id", 1]]

Started POST "/relationships" for 184.90.97.154 at 2016-05-13 20:07:26 +0000
Processing by RelationshipsController#create as JS
[1m[36m (1.5ms)[0m  [1mCOMMIT[0m

Answer 1

我已经复制了您的代码，并且在添加了以下修改后，它运行良好。 （即我不需要重新加载页面来更改“关注/取消关注”按钮）

尝试以下方法看看是否有效：

---

users/index.html.erb（这里只有相关代码，即“关注/取消关注”按钮）

<ul class="name-head">
  <% unless current_user == user %>
     <%= render partial: 'follow_form', locals: { user: user } %>
  <% end %>
</ul>

用户/_follow_form.html.erb

<div id="follow_form-<%= user.id %>">
  <% if current_user.following?(user) %>
    <%= render partial: 'unfollow', locals: { user: user } %>
  <% else %>
   <%= render partial: 'follow', locals: { user: user } %>
  <% end %>
</div>

用户/_unfollow.html.erb

<%= form_for(current_user.active_relationships.find_by(followed_id: user.id), html: { method: :delete }, remote: true) do |f| %>
    <%= f.submit "Unfollow", class: "btn-default" %>
<% end %>

用户/_follow.html.erb

<%= form_for(current_user.active_relationships.build, remote: true) do |f| %>
    <div><%= hidden_field_tag :followed_id, user.id %></div>
    <%= f.submit "Follow", class: "btn" %>  
<% end %>

relationships/create.js.erb

$("#follow_form-<%= @user.id %>").html("<%= escape_javascript(render(partial: 'users/unfollow', locals: { user: @user })) %>");

relationships/destroy.js.erb

$("#follow_form-<%= @user.id %>").html("<%= escape_javascript(render(partial: 'users/follow', locals: { user: @user })) %>");

注意<%= render partial: "_partial.html.erb", locals: { var_name: var } %> 的使用。可选的哈希locals: { ....... } 允许您将局部变量传递给要渲染的部分（_partial.html.erb）在这种情况下，您还需要在要渲染的部分名称之前添加partial:。

这样，您的user 局部变量不仅可以在users/index.html.erb 中使用，而且可以在上面列出的其他文件中使用。

Answer 2

问题出在您的 relationship/js.create.erb 和 relationship/js.destroy.erb 部分，因为您的代码仅更新页面中的第一个 #follow-form div（即第一个用户的 #follow-form，正如您报告的那样）。

您应该将您的 users\index.html.erb 更改为

<% unless current_user == user %>
  <div id="follow-form-<%= user.id %>">

这样，每个user 都会有其唯一的 div 元素。然后，修改relationship/js.create.erb如下：

$("#follow-form-<%= @user.id %>").html("<%= escape_javascript(render('users/unfollow')) %>");
$("#followers").html('<%= @user.followers.count %> <br> followers');

和relationship/js.destroy.erb 相应地，那么你应该让一切都按预期工作。