Rails 如何获取旧按钮CSS类传递给link_to_follow辅助方法

问题核心 #

现有远程替换逻辑在调用link_to_follow生成新按钮时，完全没有透传最初传入的extra_css_classes参数，且按钮DOM节点上没有保留自定义类的存储标记，导致切换状态后新生成的按钮丢失自定义样式。

最优实现方案（DOM属性存值透传） #

这个方案的稳定性最高，自定义类和具体按钮实例强绑定，不依赖类名匹配规则，后续调整基础按钮样式也不会影响自定义类的读取。

第一步：调整link_to_follow辅助方法 #

在生成按钮时把传入的extra_css_classes同步存在按钮的data-custom-css自定义属性上，不管是关注态还是取关态都保留这个标记，调整后的代码：

def link_to_follow(thing, extra_css_classes="")
  common_attrs = {
    method: :post,
    class: "btn btn-block #{extra_css_classes}",
    remote: true,
    data: { custom_css: extra_css_classes }
  }

  if current_user.following?(thing)
    # 已关注：展示取关按钮，用描边主色样式
    link_to(
      "Unfollow",
      send("unfollow_#{thing.class.name.underscore.pluralize}_path", id: thing.id),
      id: "unfollow_link_#{thing.id}",
      **common_attrs.merge(class: "#{common_attrs[:class]} btn-outline-primary")
    )
  else
    # 未关注：展示关注按钮，用实心主色样式
    link_to(
      "Follow",
      send("follow_#{thing.class.name.underscore.pluralize}_path", id: thing.id),
      id: "follow_link_#{thing.id}",
      **common_attrs.merge(class: "#{common_attrs[:class]} btn-primary")
    )
  end
end

第二步：调整JS替换逻辑 #

替换按钮前先从旧节点读取存储的自定义类，再传给link_to_follow生成新按钮，同时修复原有选择器无法匹配已切换状态按钮的问题：

<% # 兼容匹配关注态、取关态的两种按钮id %>
const btnSelector = "<%= "#follow_link_#{instance.id}, #unfollow_link_#{instance.id}" %>";
const oldBtn = document.querySelector(btnSelector);
<% # 读取旧按钮存储的自定义类值 %>
const passedExtraClasses = oldBtn?.dataset.customCss || "";

// 替换节点，把读取到的自定义类透传给辅助方法
$(btnSelector).replaceWith("<%= j link_to_follow(instance, passedExtraClasses) %>");

简化替代方案（从现有类名过滤） #

如果不想调整辅助方法加data属性，也可以在JS层从旧按钮的class列表里过滤掉辅助方法固定生成的基础类，剩余的就是自定义类：

// 列出helper固定生成的基础类，后续调整基础类时要同步更新这个列表
const defaultBaseClasses = new Set(["btn", "btn-block", "btn-primary", "btn-outline-primary"]);
const extraClasses = Array.from(oldBtn.classList)
  .filter(cls => !defaultBaseClasses.has(cls))
  .join(" ");

⚠️ 这个方案的维护成本更高：只要调整辅助方法的基础类名，就必须同步更新JS里的默认类列表，否则会把基础类误判为自定义类传入，导致样式异常。

常见踩坑提醒 #

• 不要把自定义CSS类硬编码在JS替换模板里，不同页面调用link_to_follow传入的自定义类不同，硬编码会导致样式错位
• 原有选择器仅匹配follow_link_xxx的id，第一次替换生成unfollow_link_xxx后，后续的替换操作会无法定位到节点，必须兼容两种状态的id选择器

内容的提问来源于stack exchange，提问作者amoks