javascript - 使用 Ajax 切换按钮而不刷新

Question

问题是页面上的所有“进入”按钮都具有相同的 id，并且所有“撤消”按钮都具有相同的 id，因此单击一个按钮会抵消其他按钮。而且按钮只能切换一次。我对 Rails、CSS、ajax 很陌生，感谢您的帮助，谢谢。

Micropost_Helper.rb

def toggle_like_button(micropost, user)
  if user.voted_for?(micropost)
    link_to "undo", like_micropost_path(micropost), :class => "btn btn-mini btn-primary", :id =>"unvote_form", :remote => true
  else
    link_to "Into it!", like_micropost_path(micropost), :class => "btn btn-mini btn-primary", :id =>"vote_form", :remote => true
  end
end

微帖子 Controller

def like
  @micropost = Micropost.find(params[:id])
  if @micropost.user_id != @current_user
    if @current_user.voted_for?(@micropost)
      @current_user.unvote_for(@micropost)
      respond_to do |format|
        format.html { redirect_to :back }
        format.js
      end
    else
      @current_user.vote_for(@micropost)
      respond_to do |format|
        format.html { redirect_to :back }
        format.js
      end
    end
  end
end

VIEW/microposts/like.js.erb <-- 这样我只能点击按钮一次，这里也需要帮助

$("#vote_form").html("undo")
$("#unvote_form").html("Into it!")

Answer 1

您应该将 uniq id 附加到每个按钮，如下所示:

def toggle_like_button(micropost, user)
  if user.voted_for?(micropost)
    link_to "undo", like_micropost_path(micropost), :class => "btn btn-mini btn-primary", :id =>"unvote_form_#{micropost.id}", :remote => true
  else
    link_to "Into it!", like_micropost_path(micropost), :class => "btn btn-mini btn-primary", :id =>"vote_form_#{micropost.id}", :remote => true
  end
end

然后您可以在 like.js.erb 中引用一个按钮:

$("#vote_form_<%=@micropost.id%>").html("undo")
$("#unvote_form_<%= @micropost.id%>").html("Into it!")

这样你就会有有效的 html 并且你的问题应该得到解决。