javascript - jQuery/HTML : How to use variable within onClick

Question

我真的很专注于我正在做的这个项目。下面是我的代码。顺便说一句，我正在使用 Google Maps API。

var arr = new Array();
arr[0] = lat1, lon1
arr[1] = lat2, lon2
arr[2] = lat3, lon3
for (each i in arr){
    var newCenter = "<button onClick='map.setCenter(arr[i])'>Center Map</button>";
    $("#myTable").append(newCenter);
}

现在我知道了

'map.setCenter(arr[i])'

是不正确的，因为它基本上是将“arr[i]”硬编码到 DOM 中。我想要做的是使用 arr[i] 作为变量，以便 DOM 具有:

<button onClick='map.setCenter(arr[0])'>Center Map</button>
<button onClick='map.setCenter(arr[1])'>Center Map</button>
<button onClick='map.setCenter(arr[2])'>Center Map</button>

我已经尝试过

"<button onClick='map.setCenter(" + arr[i] + ")'>Center Map</button>"

但这不起作用。我已经在这个问题上坚持了很长一段时间了。任何帮助，将不胜感激。谢谢。

Answer 1

1- 循环使用 for (var i = 0 ; i < arr.length ;i++) 的数组并且不是in运算符。

2- 您需要在单独的函数上创建链接才能获得闭包，( explanation here )

3-你的数组应该保存 google.maps.LatLng()对象。

var arr = new Array();
arr[0] = new google.maps.LatLng(lat1, lon1);
arr[1] = new google.maps.LatLng(lat2, lon2);
arr[2] = new google.maps.LatLng(lat3, lon3);


for (var i = 0 ; i < arr.length ;i++) {
    var button = createbutton(arr[i],i);
 }

function createbutton(latlon,index) {
    var button = document.createElement('button');
    var container = document.getElementById('containerDiv');
    button.onclick = function(){map.setCenter(latlon)};
    button.value = 'Center Map at ' + index;
    container.appendChild(button);
}

...并在您的 HTML 中:

<div id ="containerDiv"></div>