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

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 %>错误：mockupColor1 未定义这确实有效：<% @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>小号id小号了。（无论如何最好避免使用数字索引 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 脚本处理。