关闭问题-嵌套的循环仅打印一次

时间:2018-10-10 13:22:00

标签: javascript for-loop nested closures

这是关于堆栈溢出JavaScript closure inside loops – simple practical example的一个非常知名的帖子,但是我似乎对此一无所知。

我下面的小脚本成功在屏幕上打印了每个位置。当我单击地图上的标记时,它将弹出弹出窗口,并且它将在信息窗口内显示正确的图像和菜单。我现在面临的问题是,如果每个商店都有多个图像和菜单,我将无法输出。例如,如果我为特定的商店分配了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;

0 个答案:

没有答案