Зацикливание через массив в ERB для создания нескольких уникальных атрибутов данных в одном div

Question

Я использую библиотеку под названием Skrollr.js, чтобы я мог быстро заменить изображение другим изображением другим изображением (так, чтобы оно выглядело анимированным) поскольку пользователь прокручивает страницу вниз. Skrollr требует, чтобы HTML был написан определенным образом, на который я вставил снимок экрана ниже. В основном, в фоновом изображении и некоторых других атрибутах данных должно быть указано в теге определенным образом.

Учитывая, что я хотел бы прокручивать рамки с 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 %> 
    > 

Известный формат, необходимый для sa tisfy 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 =» opacity: 1; background-image: "часть, которая является проблемой.

Answer 1

Каждый атрибут HTML должен быть уникальным, поэтому каждый из данных - 100-вершин перезаписывает предыдущий. Я не знаю, что делает целое число в атрибуте , но вы можете сделать его уникальным, используя либо 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 %> 
    >