2016-07-24 7 views
0

上のJS連結との難しさを持つ。これは私のhtmlで、私の理解イムにすべての私のプロジェクトを表示するには、ブラウザを求め、その後、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<%[email protected]%>" min="1" max="255" > 
       <div id="output<%[email protected]%>"> </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のあることだろうスライダーを置きます私は2つの理論が、無ソリューションを持って質問

window.addEventListener("load", function(){ 
    var slider = document.getElementById("slider<%[email protected]%>"); 
    slider.addEventListener("change", function(){ 
     document.getElementById("output<%[email protected]%>").innerHTML = "value : " + this.value; 
    }); 
}); 

でスライダーのために、私の最初の理論は、私は(これはjs.erbある)適切

を連結していないですし、私の第二の理論は番目ですそれがウィンドウロードにあるので、IDが存在しないことを要求するとき、私はおそらく何をすることができますか? :/

+1

あなたが起こるしたいものを示すためにあなたの質問を更新してくださいすることを取得するために、JSを使用することができますあなたの意図を理解できるように実際に何が起こっているのかを知ることができます。 – MarsAtomic

答えて

0

gon gemを使用しない限り、js.erbでクラスインスタンス変数を取得することはできません。

また

(と簡単に)あなただけのdivのデータ属性に@ project.idの値を代入して、

<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; 
    }); 
});