Как использовать переменные цикла в 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> s id s. (числовые идентификаторы лучше избегать в любом случае)

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.