如何获取由二维数组（JS）组成的网格的坐标？答案

【问题标题】：How to obtain coordinates of a grid made from a two dimensional Array (JS)?如何获取由二维数组（JS）组成的网格的坐标？
【发布时间】：2014-07-09 00:21:00
【问题描述】：

期望的结果：

我想通过打印 400 张代表图块的图像来创建 20x20 的地图。然后，我希望能够单击这些图像并收到一条警报，告诉我该图块的相应坐标。

问题/错误：

无论我单击哪个磁贴，警报消息总是显示 x:19,y19，我假设这是仅生成的最后一个磁贴。我猜在分配值时我做错了。

我是如何尝试的：

我正在使用两个 for 循环将 20 x 20 元素的网格创建为二维数组。我使用此代码使其所有元素都等于 0。

    for (j = 0; j < 20; j++)
{   
    for (i = 0; i < 20; i++)
    { 
        mapxy[j][i] = 0;
    }
}

之后，我创建另外两个 for 循环来遍历所有这些元素并相应地打印它们的值，一个接一个（我在前两个 fors 保持模块化方法）：

    for (m = 0; m < 20; m++)
{
    for(k = 0; k < 20; k++)
    {
        document.getElementById("map").innerHTML += "<img onclick=\"tileclick(k,m)\" src=\"" + tiletype[mapxy[k][m]] + "\"/>";
    }
    document.getElementById("map").innerHTML += "</br>";
}

请注意 onclick="tileclick(k,m)" 完成这一切之后，我定义了这个函数的实际作用（显示坐标）：

function tileclick(k,m)
{
    alert('x: ' + k + ' y: ' + m);
}

任何帮助将不胜感激。感谢您的宝贵时间。

【问题讨论】：

为每个图像提供自定义属性可能更容易，例如然后在点击时检索这些值。甚至，在您的代码中

标签： javascript html arrays for-loop

【解决方案1】：

您正在使用全局变量(k and m)，因此您的代码正在运行（意味着没有崩溃），但这部分很混乱：

document.getElementById("map").innerHTML += "<img onclick=\"tileclick(k,m)\" src=\"" + tiletype[mapxy[k][m]] + "\"/>";

当您单击图像时，您正在使用 k 和 m 变量调用 tileclick。此时k = 19和m = 19（循环后）。这就是为什么你会得到一个alert 和19,19。一种解决方案是通过以下方式更改您的线路：

document.getElementById("map").innerHTML += "<img onclick=\"tileclick("+k+","+m+")\" src=\"" + tiletype[mapxy[k][m]] + "\"/>";

【讨论】：

【解决方案2】：

以下代码将按您的意愿工作，但我不推荐它，因为它没有经过优化。因为包括 getElementById 和 innerHTML 在内的大部分 DOM 方法都是高成本函数，因此您最好尽量避免调用它们。

for (m = 0; m < 20; m++)
{
    for(k = 0; k < 20; k++)
    {
        document.getElementById("map").innerHTML += "<img onclick=\"tileclick("+k+","+m+")\" src=\"" + tiletype[mapxy[k][m]] + "\" />";
    }
    document.getElementById("map").innerHTML += "<br />";
}

小优化：

var content = '';

for (m = 0; m < 20; m++)
{
    for(k = 0; k < 20; k++)
    {
        content += '<img onclick="tileclick('+k+','+m+')" src="' + tiletype[mapxy[k][m]] + '" />';
    }
    content += '<br />';
}
document.getElementById("map").innerHTML = content;

【讨论】：