Проблема закрытия - Вложенные для циклов распечатываются только один раз - PullRequest
Новая
       18

Проблема закрытия - Вложенные для циклов распечатываются только один раз

0 голосов
/ 10 октября 2018

Вот очень хорошо известная статья о переполнении стека Закрытие JavaScript внутри циклов - простой практический пример , но я не могу разобраться с этим.

Мой маленький скрипт ниже успешно распечатывает каждое место на экране.Когда я нажимаю на маркер на картах, он открывает всплывающие окна и отображает правильное изображение и меню внутри информационных окон.Проблема, с которой я сталкиваюсь сейчас, заключается в том, что я не могу вывести, если в каждом магазине более одного изображения и меню.Например, если я назначил 2 изображения и 2 меню конкретному магазину, вывод, который я получил на экране, всегда будет последней строкой из базы данных.Насколько я понимаю, я считаю, что это связано с закрытием JavaScript, но я еще не достиг этого уровня понимания. 

var funcs = [];
for (var i = 0; i < locations.length; i++) {
  for (var x = 0; x < store.length; x++) {
    if (i < store.length) {
      if (store.location_id == locations[i].id) {
        //alert(gon.store[x].menu);
        var contentString = "";
        (funcs[x] = function() { //closure
          contentString =
            '<div id="content1">' +
            '<div class="container">' +
            '<div class="p-3 mb-6 bg-dark text-white text-center" style="margin-bottom:30px;" >Available Store</div>' +
            '<div class="row">' +
            '<div class="col">' +
            '<img src="' + store.image + ' width="150px" height="150px">' +
            '</div>' +
            '<div class="col text-center">' +
            '<table class="table">' +
            '<tbody>' +
            '<tr>' +
            '<th scope="row">Menu</th>' +
            '<td>' +
            store.menu +
            '</td>' +
            '</tbody>' +
            '</table>' +
            '</div>' +
            '</div>' +
            '</div>' +
            '</div>';
        })(x);
      }
    }
  }
  //contentString+=contentString;
...