如何在循环外的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 }) => {&nbsp; if (!target.matches('button')) {&nbsp; &nbsp; return;&nbsp; }&nbsp; target.nextElementSibling.style.backgroundColor = '#' + target.dataset.color;});container按钮和 div 周围的容器在哪里。请注意，使用的nextElementSibling，就没有必要给<div>小号id小号了。（无论如何最好避免使用数字索引 ID）

Answer 2

<% @line_items.each do |li| %>&nbsp; &nbsp;<button type="button" onclick="mockupColor(<%= "#{li.id}" %>)"></button>&nbsp; &nbsp;<div id="tshirt-div-<%= "#{li.id}" %>">#code</div>&nbsp; &nbsp;<% end %><script>&nbsp; &nbsp; function mockupColor(id){&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("tshirt-div-"+id).style.backgroundColor = '#000000';&nbsp; &nbsp; );</script>您不需要循环 java 脚本函数。该函数应该只接受 JavaScript 变量并作为 java 脚本处理。