从二维数组中获取img src和img维度并显示在body中

Question

我正在尝试从二维数组中获取图像源并设置尺寸

var ImgArray=new Array(2)

ImgArray[0][0] = ["http://imgsrc.jpg"]
ImgArray[0][1] = [width="200",height="200"]
ImgArray[1][0] = ["http://imgsrc.jpg"]
ImgArray[1][1] = [width="200",height="200"]

，将源的尺寸更改为新尺寸（200x200）

var i=0;
var j=0;

function NextImg(){
    ++i;
    ++j;
    document.getElementById('imageset').width = ImgArray[i][j]
    document.getElementById('imageset').height = ImgArray[i][j]
    document.getElementById('imageset').src = ImgArray[i][j]
}

并在此处显示结果

<img id="imageset" /> 
<button type="button" onclick="NextImg()">Next image</button>

Answer 1

您需要打开您的开发工具（在大多数浏览器中为 F12）并查看出现的错误。一旦你这样做了，很明显你的大部分代码甚至都不是有效的 javascript，而且许多其他部分也有很大的问题。

例如，您开始将值分配给 ImgArray[0][0]...但是甚至还没有 ImgArray[0] 可以分配 [0] 给。您可能有一个长度为 2 的数组......但是 2 是什么？这些值仍然是undefined。您需要将它们本身设置为新数组，然后才能开始将它们用作数组。您的开发工具会立即告诉您这是一个问题。

而且你分配的值在很多情况下不是有效的JS，比如[width="200",height="200"]。那根本不是 JS。

如果您尝试创建一个具有宽度/高度属性的对象，它将是{width:"200", height:"200"}，如果您尝试创建一个数组（您未来的使用建议），那么它将是["200", "200"]，作为数组元素没有这种方式的属性名称，它们从 0 开始索引。所以第一个是 [0]，第二个是 [1]。

最重要的是，您的 j 变量或递增它没有任何意义。不需要其他递增变量。

而且你也在函数的开始处递增，所以你的第一个图像将是数组的第二个 ([1]) 索引。尝试从 -1 开始 i 以使 0 成为递增后的第一个结果。

一个工作的 JSFiddle 在这里：https://jsfiddle.net/c0psj611/

还有一个更好的方法（使用对象存储关联数据）：https://jsfiddle.net/2s5x7nL5/

Answer 2

你同时增加 i 和 j 所以你只能访问：

ImgArray[0][0] and  ImgArray[1][1]

另外，你没有得到这个语句中的宽度和高度

document.getElementById('imageset').width = ImgArray[i][j]
document.getElementById('imageset').height = ImgArray[i][j]

---

鉴于此，您应该执行类似的操作

var ImgArray = [["http://imgsrc.jpg", 200, 200],["http://imgsrc.jpg", 200, 200]];

那么你的功能会是这样的：

var i=0;

function NextImg(){
   ++i; //or i++;
   document.getElementById('imageset').width = ImgArray[i][0];
   document.getElementById('imageset').height = ImgArray[i][1];
   document.getElementById('imageset').src = ImgArray[i][2];
}

你可以保持你的显示像：

<img id="imageset" /> 
<button type="button" onclick="NextImg()">Next image</button>