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

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

本文关键字：img 并在 body 显示 维度 src 二维数组 获取      更新时间：2023-09-26

我正试图从二维阵列中获取图像源并设置尺寸

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>

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

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

在许多情况下，您分配的值都不是有效的JS，例如[width="200",height="200"]。这根本不是JS。

如果你试图制作一个具有width/height属性的Object，那么它将是{width:"200", height:"200"}，如果你试图创建一个Array（你未来的用法建议），那么它应该是["200", "200"]，因为Array元素没有这样的属性名称，它们是从0索引的。所以第一个是[0]，第二个是[1]。

除此之外，您的j变量没有任何用途，也没有对其进行增量。不需要其他增量变量。

在函数开始时，您也在递增，所以您的第一个图像将是数组的第二个（[1]）索引。尝试在-1处启动i，以便0成为递增后的第一个结果。

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

这里有一种更好的方法（使用对象来存储相关数据）：https://jsfiddle.net/2s5x7nL5/

您同时递增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>
相关文章：