javascript - 从二维数组中获取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 又是什么？这些值仍然是未定义。在开始将它们用作数组之前，您需要将它们本身设置为新数组。您的开发工具会立即告诉您这是一个问题。

并且您分配的值在许多情况下不是有效的 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/