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]。< / p>

除此之外，您的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维度并在正文中显示

2 个答案: