css - Ajax 正在分层引导按钮

Question

我使用 ajax 来切换“喜欢”按钮而不刷新页面。出于某种原因，当我单击按钮时，在按钮的背景中似乎有几层更大的按钮。我不知道它们为什么要分层或为什么它们会更大。

问题在于我正在使用的引导类。它导致它通过 btn 调用 btn。当我删除类时，链接会正确重新呈现。因此，我尝试在 CSS 中重新设置 link_to 的样式，使其看起来像 btn，但是出现了同样的问题。

这是按钮通常的外观：

点击后：

微贴/助手：

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("<%= escape_javascript(toggle_like_button(@micropost, @current_user)) %>")
$("#unvote_form_<%=@micropost.id%>").html("<%= escape_javascript(toggle_like_button(@micropost, @current_user)) %>")

微柱控制器：

def like
  @micropost = Micropost.find(params[:id])
  @feed_item = Micropost.find(params[:id])
  if @micropost.user_id != @current_user.id
    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

Answer 1

html(htmlString)设置选定元素的内容。您选择的元素是按钮。改为使用replaceWith(newContent)。