JQuery/HTML：如何在 onClick 中使用变量答案

【问题标题】：JQuery/HTML: How to use variable within onClickJQuery/HTML：如何在 onClick 中使用变量
【发布时间】：2012-11-08 04:58:23
【问题描述】：

我真的坚持我正在做的这个项目。下面是我的代码。顺便说一句，我正在使用 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>"

但这不起作用。我已经坚持了很长时间。任何帮助，将不胜感激。谢谢。

【问题讨论】：

你想用什么来完成：arr[0] = lat1, lon1。那不是将两个值放入数组项中。你的意思是：arr[0] = {lat1, lon1}
我很抱歉这么马虎。代码大大缩短。 arr[i] 只是使用 Google Maps API 从其他东西中提取的任意纬度、经度坐标。主要担心的是我无法让 arr[i] 在 onClick 中充当变量。
如果您需要帮助，请使用“编辑”按钮更正您的代码。如果您提供的代码中存在各种错误，我们无法判断问题出在哪里。 i 可能未在您的 onclick 处理程序中定义。
jfriend00，我觉得这样发布我的代码很迟钝。我道歉。明天我会问我的教授，如果他不能帮忙，我会链接我的整个代码。

标签： javascript jquery html google-maps-api-3

【解决方案1】：

1- 循环使用 for (var i = 0 ; i < arr.length ;i++) 和 not 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>

【讨论】：

你肯定知道我要做什么！好的，到目前为止我在地图上有多个标记。我的任务是在网页上为每个标记创建一个按钮。该按钮用于在地图上设置与该标记相对应的中心。 “arr[i]”基本上是标记的位置。您的解决方案非常接近，但由于某种原因，我收到一条“[object HTMLButtonElement]”消息，实际按钮应该是。
该消息可能与 jQuery 将按钮附加到表格的方式有关。你的表格有行和单元格吗？
是的，我正在使用行和列。这是我的追加函数到目前为止的样子： $("#myTable").append(" " + name + "" + "" + button + " td> ");
这看起来不像是一个可以做任何事情的函数。我已经编辑了答案，只需将按钮附加到
中。下次，请发布您的完整代码。 :-)
相信我一直在考虑为你们发布整个代码，因为这样会更容易。问题是这是一个为期 2 周的学校项目，我不想因为其他学生公然窃取我的代码而惹上麻烦。如果明天教授没有解决问题，我会将我的整个代码链接给你。

【解决方案2】：

for (each i in arr){

应该是

for (var i in arr){

另外arr[0] = lat1, lon1 本来就没有任何意义

完整代码

for (var i in arr){
    var newCenter = "<button onClick='map.setCenter("+ arr[i] + ")'>Center Map</button>";
    $("#myTable").append(newCenter);
}

【讨论】：

抱歉，当我尝试输入较短版本的代码时，这实际上是一个错字。我确实有“var i in arr”