循环遍历ERB中的数组以在单个div中创建多个唯一数据属性

Question

我正在使用一个名为Skrollr.js的库，这样当用户向下滚动页面时，我可以快速连续地将另一个图像替换为另一个图像（以便它看起来像动画）。 Skrollr要求以特定方式编写HTML，我已粘贴下面的屏幕截图。基本上，必须以特定方式在标记内声明“background-image”和一些其他数据属性。

鉴于我想要滚动180多个帧，引用图像路径数组会更容易，这样我就不必在180多个背景图像路径中硬编码到HTML中。问题是我不能让ERB多次输出背景图像部分（参见下面的“期望输出”与“实际输出”）。

我无法弄清楚如何在不将它放入引号的情况下获取“data - 100-top =”部分，这将违背skrollr的语法。

代码：

  <div class="full_screen_second"
    data-anchor-target=".full_screen_second"
    <% i=01 %>
    <% until i == @image_urls.length %>
      data--100-top="opacity: 1; background-image: !url(assets/<%=  @image_urls[i].gsub('"','') %>)"
      <% i+=1 %>
    <% end %>
  >

使用“gsub”删除引号以符合Skrollr语法

我也尝试过：（以及其他许多迭代）

  <div class="full_screen_second"
    data-anchor-target=".full_screen_second"
    <% @image_urls.each do |image| %>
      data--100-top="opacity: 1; background-image: !url(assets/<%=  image.gsub('"','') %>)"
    <% end %>
  >

满足Skrollr语法所需的已知格式

这是我想要的最终结果（在DevTools中查看）：

  <div class="full_screen_second"
    data-anchor-target=".full_screen_second" 
data--100-top="opacity: 1; background-image: !url(assets/nav_adjust/scene1.jpg)"
data--100-top="opacity: 1; background-image: !url(assets/nav_adjust/scene2.jpg)"
data--100-top="opacity: 1; background-image: !url(assets/nav_adjust/scene3.jpg)"
data--100-top="opacity: 1; background-image: !url(assets/nav_adjust/scene4.jpg)"
continuing on from here
  >

以下是DevTools中的实际结果

div class="full_screen_second" 
data-anchor-target=".full_screen_second" 
data--100-top="opacity: 1; background-image: !url(assets/nav_adjust/scene1.jpg)"
style="opacity: 1; background-image: url(http://localhost:3000/assets/nav_adjust/scene1jpg);"
>

（注意：实际输出的style="opacity: 1; background-image: url(http://localhost:3000/assets/nav_adjust/scene1jpg);"部分我认为没问题，事实是它只输出“data - 100-top =”不透明度：1 ; background-image：“这是问题的一部分。

Answer 1

每个HTML属性都必须是唯一的。所以每个数据--100-top都会覆盖前一个数据。我不知道该属性中整数的作用，但您可以使用image.id或时间戳使其唯一：

  <div class="full_screen_second"
    data-anchor-target=".full_screen_second"
    <% @image_urls.each do |image| %>
      data--<%= image.id>-top="opacity: 1; background-image: !url(assets/<%=  image.gsub('"','') %>)"
    <% end %>
  >