这是关于堆栈溢出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;