从二维数组中获取 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/height 属性的对象，它将是 {width:"200", height:"200"}，如果您尝试制作一个数组（您未来的用法建议），那么它将是["200", "200"]，因为 Array 元素没有那样的属性名称，它们从 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>

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

Get img src and img dimensions from two dimensional array and display in body

javascript

arrays

image

function

dimensions