Ruby on Rails中实现轮播图点击事件连续递增序号的方案

你的问题根源在于重复编写了每个图片的渲染逻辑，导致序号只能写死。我们可以通过把图片属性整理成数组并循环遍历的方式，自动生成连续递增的序号，同时大幅减少重复代码。

下面是修改后的完整代码：

<% @galleries.each do |g| %>
  <% # 把所有图片属性放到数组里，过滤掉不存在的图片 %>
  <% images = [g.image1, g.image2, g.image3, g.image4, g.image5].compact %>
  <% # 用each_with_index遍历，index从0开始，所以序号是index + 1 %>
  <% images.each_with_index do |image, index| %>
    <div class="column <%= g.product_name %>">
      <div class="content">
        <%= image_tag image.url, 
                      alt: "conversion", 
                      style: "width:100%", 
                      onclick: "openModal();currentSlide(#{index + 1})", 
                      class: "hover-shadow cursor" %>
      </div>
    </div>
  <% end %>
<% end %>

代码说明： #

• [g.image1, g.image2, ..., g.image5].compact：将所有图片属性收集到数组中，compact方法会自动移除nil值（也就是那些不存在的图片）。
• each_with_index：遍历数组时同时获取元素的索引，索引从0开始，所以用index + 1得到从1开始的连续序号。
• 把原来重复的<div class="column">和image_tag逻辑放到循环里，自动为每个存在的图片生成对应的DOM结构和正确的currentSlide参数。

这样修改后，不管每个gallery有多少张图片（1到5张），都会自动生成1、2、3...的连续序号，而且代码更简洁易维护。

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