Как совместить тег Rails и JavaScript - PullRequest
Новая
       11

Как совместить тег Rails и JavaScript

0 голосов
/ 15 мая 2018

У меня 4 мода на 1 странице, каждый модал должен показывать изображения продуктов, принадлежащих к другому продукту. Я думал, что смогу использовать product.id, чтобы javascript знал, какие изображения продуктов показывать, но я не уверен, как этого добиться.

В моих рельсах я думал, что смогу сделать: 

class="mySlides<%= product.id %>"

А потом в Javascript я сделал: 

getElementsByClassName(`mySlides<%= product.id %>`);

Но это не работает должным образом. Javascript всегда захватывает последний product.id на странице. Как правильно вставить <% = product.id%> в функцию javascript ??

Часть мой взгляд : 

<div id="myModal<%= product.id %>" class="productsModal">
 <div class="modal-content">

  <% product.product_images.each.with_index do |product_image, index| %>
    <div class="mySlides mySlides<%= product.id %>">
       <%= image_tag product_image.image.url(:large) %>
    </div>
  <% end %>

  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>

  <% product.product_images.each.with_index do |product_image, index| %>
    <div class="column">
      <div style="width:100%" onclick="currentSlide(<%= index+1 %>)" class="demo demo<%= product.id %>">
        <%= image_tag product_image.image.url(:thumb) %>
      </div>
    </div>
  <% end %>
</div>

Часть JavaScript : 

function showSlides(n) {
 var slides = document.getElementsByClassName(`mySlides<%= product.id %>`);
 var dots = document.getElementsByClassName(`demo<%= product.id %>`);
 ...
}

1 Ответ

0 голосов
/ 15 мая 2018

если ваш javascript находится в отдельном файле, вы можете добавить обработчик шаблона .erb: myfile.js.erb, чтобы использовать embed ruby ​​

, если ваш javascript находится внутри html-представления, вы можете использовать помощник rails javascript_tag (вместо <script></script>): 

<%= javascript_tag do %>
  var slides = document.getElementsByClassName('mySlides<%= j product.id %>');
  var dots = document.getElementsByClassName('demo<%= j product.id %>');
<% end %>
...