如何用Rails按钮实现数组元素的增量切换显示？

你的判断完全正确——每次点击按钮发起新请求时，控制器的@ni和@si实例变量都会被重新初始化，所以无法保留之前的索引值。Rails是无状态框架，每次HTTP请求都会创建全新的控制器实例，实例变量无法跨请求保存状态。下面是具体的修正方案：

1. 用Session存储索引状态 #

Session是Rails中用来在请求间保存用户状态的机制，我们可以用它来存ni和si的值，替代实例变量。

修改MainController.rb：

class MainController < ApplicationController
  def home
    @necklines = Neckline.all
    @skirts = Skirt.all

    # 初始化session中的索引，默认0（仅当session中无值时）
    session[:ni] ||= 0
    session[:si] ||= 0

    # 处理空数组的边界情况，避免索引越界报错
    session[:ni] = 0 if @necklines.empty?
    session[:si] = 0 if @skirts.empty?
  end

  def increase_neck
    @necklines = Neckline.all
    return redirect_to root_path if @necklines.empty?
    
    if session[:ni] >= @necklines.count - 1
      session[:ni] = 0
    else
      session[:ni] += 1
    end
    redirect_to root_path    
  end

  def decrease_neck
    @necklines = Neckline.all
    return redirect_to root_path if @necklines.empty?
    
    if session[:ni] <= 0
      session[:ni] = @necklines.count - 1
    else
      session[:ni] -= 1
    end
    redirect_to root_path
  end

  def increase_skirt
    @skirts = Skirt.all
    return redirect_to root_path if @skirts.empty?
    
    if session[:si] >= @skirts.count - 1
      session[:si] = 0
    else
      session[:si] += 1
    end 
    redirect_to root_path   
  end

  def decrease_skirt
    @skirts = Skirt.all
    return redirect_to root_path if @skirts.empty?
    
    if session[:si] <= 0
      session[:si] = @skirts.count - 1
    else
      session[:si] -= 1
    end   
    redirect_to root_path 
  end
end

2. 更新视图文件 #

把视图中调用@ni和@si的地方换成session[:ni]和session[:si]，同时增加空数组的判断，避免报错：

修改home.html.erb：

<h1> Main#home </h1>

<div>
  <div class='neckline'>
    <% if @necklines.empty? %>
      <h3>暂无领型数据</h3>
    <% else %>
      <h3> <%= @necklines[session[:ni]].style_name %> </h3>
      <div class='child inline-block-child'> <%= button_to "<", main_decrease_neck_path, method: :post %> </div>
      <div class='child inline-block-child'> <%= image_tag @necklines[session[:ni]].image %> </div>
      <div class='child inline-block-child'> <%= button_to ">", main_increase_neck_path, method: :post %> </div>
    <% end %>
  </div>

  <div class='skirt'>
    <% if @skirts.empty? %>
      <h3>暂无裙型数据</h3>
    <% else %>
      <div class='child inline-block-child'> <%= button_to "<", main_decrease_skirt_path, method: :post %> </div>
      <div class='child inline-block-child'> <%= image_tag @skirts[session[:si]].image %> </div>
      <div class='child inline-block-child'> <%= button_to ">", main_increase_skirt_path, method: :post %> </div>
      <h3> <%= @skirts[session[:si]].style_name %> </h3>
    <% end %>
  </div>
</div>

3. 补全路由配置 #

你的routes.rb中没有定义按钮对应的POST请求路由，需要添加进去：

修改routes.rb：

Rails.application.routes.draw do
  get '/necklines', to: 'neckline#index'
  get "/necklines/:id", to: "neckline#show"
  get '/skirts', to: 'skirt#index'
  get '/skirts/:id', to: 'skirt#show'

  # 新增Main控制器的POST路由
  post '/home/increase_neck', to: 'main#increase_neck'
  post '/home/decrease_neck', to: 'main#decrease_neck'
  post '/home/increase_skirt', to: 'main#increase_skirt'
  post '/home/decrease_skirt', to: 'main#decrease_skirt'

  root "main#home"
end

关键说明 #

• Session的作用：Session会把索引值存在用户的浏览器Cookie中（或服务器端存储，取决于Rails配置），每次请求都会携带这个值，从而保留当前的浏览位置。
• 边界处理：增加了空数组判断，避免当数据库中没有Neckline或Skirt数据时出现索引越界的错误。
• 路由命名：使用路径辅助方法（如main_increase_neck_path）比硬编码URL更符合Rails最佳实践，后续路由变更时不需要修改视图代码。

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