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

Question

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

鉴于我想滚动 180 多个帧，引用一组图像路径会更容易，这样我就不必将 180 多个背景图像路径硬编码到 HTML.问题是我无法让 ERB 多次输出背景图像部分（参见下面的 "Desired output" 与 "actual output"）。

我不知道如何在不将其放入引号中的情况下获取 "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 %>
  >

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

Looping through an array in ERB to create multiple unique data attributes in a single div

ruby-on-rails

erb

skrollr