Rails应用基于数据库label字段动态生成按钮及关联问题的实现问询

嘿，这个需求在Rails里实现起来挺顺畅的，我给你一步步拆解下具体怎么做哈～

第一步：控制器里搞定标签数据 #

首先得在对应的控制器（比如QuestionnairesController）里，把数据库里所有不重复的标签捞出来——总不能同一个标签生成好几个重复按钮对吧？用pluck+uniq就能轻松实现，顺便把所有问卷数据也带上，方便后续筛选问题：

# app/controllers/questionnaires_controller.rb
def index
  # 获取所有不重复的标签值
  @labels = Questionnaire.pluck(:label).uniq
  # 拉取全量问卷数据，后续用来筛选对应标签的问题
  @questionnaires = Questionnaire.all
end

第二步：视图里动态生成按钮 #

接下来在视图文件（比如app/views/questionnaires/index.html.erb）里，遍历@labels循环生成按钮就行。给每个按钮加个data-label属性，方便后面JS识别点击的是哪个标签；再整个容器放问题，用来展示筛选后的内容：

<!-- 标签按钮容器 -->
<div class="label-buttons">
  <% @labels.each do |label| %>
    <button class="label-btn" data-label="<%= label %>">
      <%= label %>
    </button>
  <% end %>
</div>

<!-- 问题展示区域 -->
<div id="questions-container" class="questions-container">
  <p>请选择一个标签查看对应的问题</p>
</div>

可以加点简单的CSS让按钮好看点，比如在app/assets/stylesheets/questionnaires.scss里：

.label-buttons {
  margin-bottom: 20px;
  .label-btn {
    margin-right: 10px;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    background-color: #007bff;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.2s;
    
    &:hover {
      background-color: #0056b3;
    }
    
    &.active {
      background-color: #0056b3;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
  }
}

.questions-container {
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 4px;
  min-height: 100px;
}

第三步：处理点击事件展示对应问题 #

这里分两种方式，你可以根据自己的Rails版本选：

方式1：原生JS（兼容所有Rails版本） #

如果不想用Turbo这类新工具，原生JS就能搞定。在app/assets/javascripts/questionnaires.js里写逻辑：

document.addEventListener('DOMContentLoaded', function() {
  const labelButtons = document.querySelectorAll('.label-btn');
  const questionsContainer = document.getElementById('questions-container');
  
  labelButtons.forEach(button => {
    button.addEventListener('click', function() {
      // 给选中的按钮加active样式，移除其他按钮的active
      labelButtons.forEach(btn => btn.classList.remove('active'));
      this.classList.add('active');
      
      const selectedLabel = this.dataset.label;
      // 把Rails的@questionnaires转成JSON传到前端
      const allQuestions = <%= raw @questionnaires.to_json %>;
      
      // 筛选当前标签对应的问题
      const filteredQuestions = allQuestions.filter(q => q.label === selectedLabel);
      
      // 渲染问题到容器里
      renderQuestions(filteredQuestions, selectedLabel);
    });
  });
  
  // 封装渲染问题的函数，更清晰
  function renderQuestions(questions, label) {
    if (questions.length === 0) {
      questionsContainer.innerHTML = `<p>标签「${label}」没有对应的问题哦</p>`;
      return;
    }
    
    let html = `<h4>标签「${label}」的问题</h4><ul>`;
    questions.forEach(q => {
      // 这里替换成你问卷表的实际字段，比如title、content之类的
      html += `<li>${q.title || q.content}</li>`;
    });
    html += '</ul>';
    
    questionsContainer.innerHTML = html;
  }
});

方式2：用Rails Turbo（更现代的写法） #

如果是Rails 7+，用Turbo会更简洁，不用写太多JS。步骤如下：

1. 先在路由里加个筛选问题的路由：

# config/routes.rb
Rails.application.routes.draw do
  resources :questionnaires do
    get :filtered_questions, on: :collection
  end
end

2. 控制器里加filtered_questions动作，返回Turbo Stream：

# app/controllers/questionnaires_controller.rb
def filtered_questions
  @label = params[:label]
  @questions = Questionnaire.where(label: @label)
  
  respond_to do |format|
    format.turbo_stream do
      render turbo_stream: turbo_stream.update(
        "questions-frame", 
        partial: "questionnaires/questions_list", 
        locals: { questions: @questions, label: @label }
      )
    end
  end
end

3. 修改视图，用Turbo Frame和按钮：

<!-- 标签按钮区域 -->
<div class="label-buttons">
  <% @labels.each do |label| %>
    <%= button_to label, filtered_questions_questionnaires_path(label: label), 
                  method: :get,
                  class: "label-btn",
                  data: { turbo_stream: true } %>
  <% end %>
</div>

<!-- 用Turbo Frame来更新问题区域 -->
<%= turbo_frame_tag "questions-frame" do %>
  <p>请选择一个标签查看对应的问题</p>
<% end %>

4. 创建渲染问题的partialapp/views/questionnaires/_questions_list.html.erb：

<h4>标签「<%= label %>」的问题</h4>
<% if @questions.empty? %>
  <p>没有找到对应标签的问题哦</p>
<% else %>
  <ul>
    <% @questions.each do |question| %>
      <li><%= question.title %></li> <!-- 替换成你的实际字段 -->
    <% end %>
  </ul>
<% end %>

小提醒 #

• 如果标签特别多，可以考虑加个搜索框或者分页，不过按你当前需求先这样就够了
• 原生JS方式里，把问卷数据传到前端也可以用gon gem，比直接写raw to_json更优雅，不过简单场景下直接写也没问题
• 可以根据自己的UI需求调整样式，比如按钮的颜色、问题的排版啥的

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