有没有办法将 for 循环的索引传递给按钮对象中的单击函数(jQueryUI-dialog)?

Question

在我的地图应用程序中，我尝试实现一个jQueryUI对话框，该对话框根据搜索表单产生的点击次数动态按钮数量。这些按钮调用showResults()方法，该方法导航到与单击的匹配对应的标记。

问题是，无论您单击哪个按钮，它都将始终导航到命中数组的最下方。我知道这是由于点击事件，所以当它被触发时，变量命中将始终包含最后一个条目hit[hit.length-1]。

我现在唯一的解决方法是为每个可能的点击量定义单独的函数，其中我在div.dialog-object 中"定期"定义按钮，而不是在 for 循环中，但这会导致大量冗余代码。

这是我的代码：

function multiplehits(message, names, sites) {
var buttons = [];
for (var i=0; i < hits.length; i++){
var hit = hits[i];
var button = {
text: names[i]+", "+sites[i],
click: function () {
div.remove();
showResults(hit); /*always navigates to the last entry of the hits array*/
$(this).dialog("close");                    
}
}
buttons.push(button);
}
var div = $('<div>');
div.html(message);
div.dialog({
close: function( event, ui ) {
hits = [];
},
closeText: 'close',
autoOpen: true,
modal: true,
draggable: false,
resizable: false,
title: OpenLayers.i18n('Title'),            
buttons: buttons
});
}

是否有某种技巧将正确的索引传递给点击函数？由于我为此使用了jQuery按钮，因此我认为我必须坚持使用对象结构button = {text,click:function(){})。

Answer 1

最快的方法：

取代：

var hit = hits[i];

跟：

let hit = hits[i];

---

正确的方法：

了解 JavaScript 闭包、IIFE、.bind方法和 ES6 的新功能。

另一个问题是一个很好的起点。

---

代码片段

var hits = [1,2,3];
var names = ['a','b','c'];

var buttons = [];

function showResults(hit){
console.log(hit);
}

for (var i=0; i < hits.length; i++){
let hit = hits[i];
var button = {
text: names[i],
click: function () {
div.remove();
showResults(hit); /*always navigates to the last entry of the hits array*/
}
}
buttons.push(button);
}
var div = $('<div>');
div.html("message");
div.dialog({
close: function( event, ui ) {
hits = [];
},
closeText: 'close',
autoOpen: true,
modal: true,
draggable: false,
resizable: false,
title: 'Title',            
buttons: buttons
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>