Question

这是我的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<%=@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;
    });
});

我有2个理论但没有解决方案，我的第一个理论是我没有正确连接（这是js.erb）

而我的第二个理论是，因为它是在窗口加载，当它要求它们不在那里时，我能做什么？：/

Answer 1

除非使用gon gem，否则您将无法在js.erb中检索类实例变量。

或者（更简单）你可以将@ project.id的值分配给divs数据属性，然后使用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;
  });
});

在轨道上遇到js连接有困难

1 个答案: