Question

我需要能够在循环内使用变量，而不是在循环外使用脚本标记之间的javascript。最好不要使用脚本标签和文件中的内容，而应使用脚本标签来开始...

我有这行不通的：

<% @line_items.each do |li| %>
<button type="button" onclick="mockupColor<%= "#{li.id}" %>()"></button>
<div id="tshirt-div-<%= "#{li.id}" %>">
#code
<script>
    function mockupColor<%= li.id %>(){
        document.getElementById("tshirt-div-<%= "#{li.id}" %>").style.backgroundColor = '#000000';
    }, false);
</script>
<% end %>

错误：未定义ockupColor1

这确实有效：

<% @line_items.each do |li| %>
<button type="button" onclick="mockupColor"></button>
<div id="tshirt-div">
#code
<% end %>
<script>
    function mockupColor(){
        document.getElementById("tshirt-div").style.backgroundColor = '#000000';
    }, false);
</script>

问题是我需要能够调用li.id，因为一旦我发现此函数发出问题，颜色就会根据li.id改变。

是否可以通过某种方式在循环外的脚本标签中将li.id与循环匹配？

我不明白为什么这行不通，因为我之前肯定在循环内使用过javascript，而且效果很好。我在应用程序的fields_for循环中使用了类似的代码，并且以这种方式使用函数的效果非常好……无论出于何种原因，这次都不是。还是我缺少某些东西而做得不好？

HTML：（内部循环）

<button type="button" class="btn btn-info" data-toggle="modal" data-color="796" data-target="#exampleModal2-796" id="#exampleModal2-796"  onclick="mockupColor()">

<script>
function mockupColor() {
   document.getElementById("tshirt-div-796").style.backgroundColor = '#000000';
};
</script>

Answer 1

虽然您可以通过在对mockColor的调用周围添加适当的括号和定界符来解决问题-而不是使用内联处理程序（通常被认为是非常差的做法），而是考虑添加数据属性而是使用事件委托来观察容器中button的点击情况：

<button type="button" data-color="<%= "{li.id}" %>"></button>
<div>

和

container.addEventListener('click', ({ target }) => {
  if (!target.matches('button')) {
    return;
  }
  target.nextElementSibling.style.backgroundColor = '#' + target.dataset.color;
});

其中container是按钮和div周围的容器。

请注意，使用nextElementSibling不再需要赋予<div> s id s。（无论如何，最好避免使用数字索引的ID）

Answer 2

<% @line_items.each do |li| %>
   <button type="button" onclick="mockupColor(<%= "#{li.id}" %>)"></button>
   <div id="tshirt-div-<%= "#{li.id}" %>">#code</div>   
<% end %>
<script>
    function mockupColor(id){
        document.getElementById("tshirt-div-"+id).style.backgroundColor = '#000000';
    );
</script>

您不需要循环Java脚本功能。该函数应只接受JavaScript变量并将其作为Java脚本进行处理。

如何在循环外的javascript中使用循环变量？

2 个答案: