與軌道

Question

JS串聯遇到困難，這是我的HTML和我的理解IM要求瀏覽器顯示我的所有項目，然後把將被JS被傾聽

<div class='nav_bar'>#</div> 
<% if @projects %> 
    <% @projects.each do |project| %> 
     <li><div class='container'><h1><%=project.name %> </h1> 
      <ul> 
       <%= form_for project do %> 
       <%= fields_for :palette, project.palette do |palette| %> 
       <input type="range" id="slider<%=@project.id%>" min="1" max="255" > 
       <div id="output<%=@project.id%>"> </div> 

        <%= palette.label 'background_dark_color' %>: 
        <%= palette.text_field :background_dark_color, placeholder: '@palette.background_dark_color' %><br/> 

        <%= palette.label 'background_light_color' %>: 
        <%= palette.text_field :background_light_color, placeholder: "@palette.background_light_color" %><br/> 

        <%= palette.label 'dark_color1' %>: 
        <%= palette.text_field :dark_color1, placeholder: "@palette.dark_color1" %><br/> 

        <%= palette.label 'dark_color2' %>: 
        <%= palette.text_field :dark_color2, placeholder: "@palette.dark_color2" %><br/> 

        <%= palette.label 'light_color1' %>: 
        <%= palette.text_field :light_color1, placeholder: "@palette.light_color1" %><br/> 

        <%= palette.label 'light_color2' %>: 
        <%= palette.text_field :light_color2, placeholder: "@palette.light_color2" %><br/> 

        <%= palette.submit %> 

        <%= link_to 'Destroy', project, method: :delete, data: { confirm: 'Are you sure?' } %> 

       <% end %> 
       </div> 
      </ul> 

     <% end %></li> 
    <%end%> 
<%end%> 
<div class='circle'><%= link_to "+", new_project_path %></div> 
<button type="button"><%= link_to "+", new_project_path %></button> 

滑塊，這是JS有問題的滑塊

window.addEventListener("load", function(){ 
    var slider = document.getElementById("slider<%=@project.id%>"); 
    slider.addEventListener("change", function(){ 
     document.getElementById("output<%=@project.id%>").innerHTML = "value : " + this.value; 
    }); 
}); 

我有兩個理論，但沒有辦法解決，我的第一個理論是我沒有正確串接（這是js.erb）

和我的第二個理論是個因爲它是在窗口加載，所以當它要求這個ID時，它們不在那裏，我可能會做什麼？ ：/

Answer 1

您將無法檢索js.erb中的類實例變量，除非您使用gon gem。

或者（更容易），你可以@ project.id的價值只是分配給div的數據屬性，然後使用JS來檢索

<div data-project-id="<%= @project.id %>"></div> 

var projectId = $('[data-project-id]').data('projectId'); 

window.addEventListener("load", function(){ 
    var slider = document.getElementById("slider"+projectId); 
    slider.addEventListener("change", function(){ 
    document.getElementById("output"projectId).innerHTML = "value : " + this.value; 
    }); 
});