我有一个for（）循环，用于设置表中元素的src，高度和宽度。我是Javascript的新手（大约2-3个星期，自学成才），但我已经在游戏“第二人生”中使用行脚本语言（LSL）进行编码，所以这看起来相当熟悉且容易理解，对我而言。它也是我的代码和其他代码的组合，使这项工作成功。阅读“film1.txt”文件的重要部分来自某人，然后进行了大量修改以便为我工作。大多数变量都有我想到的名字，所以看起来有点武断，或者很容易理解。
导致问题的Javascript：
var txtFile = new XMLHttpRequest();
txtFile.open("GET", "film1.txt", true);
txtFile.onreadystatechange = function() {
if (txtFile.readyState === 4) { // Makes sure the document is ready to parse.
if (txtFile.status === 200) { // Makes sure it's found the file.
allText = txtFile.responseText;
linesParted = allText.split(","); // Will separate each line into an array
document.getElementById("display").src=linesParted[0];
document.getElementById("displayText").innerHTML=linesParted[1];
var dispResize = new Image();
dispResize.src = linesParted[0];
dispResize.onload = function() {
var dispNewHeight = (this.height*(500))/this.width;
var dispNewWidth = 500;
document.getElementById("display").style.height = dispNewHeight;
document.getElementById("display").style.width = dispNewWidth;
}
//
var imgToDo;
for(imgToDo = 0; imgToDo < ((linesParted.length)/2); imgToDo++)
{
var imgToResize = new Image();
imgToDoTimes2 = linesParted[imgToDo*2]
if(imgToDoTimes2 != null) {
document.getElementById("img"+imgToDo).style.cursor = "pointer";
document.getElementById("img"+imgToDo).src=imgToDoTimes2;
imgToResize.src = imgToDoTimes2;
imgToResize.onload = function() {
var imgResizeNewHeight = (this.height*125)/this.width;
document.getElementById("img"+imgToDo).height = imgResizeNewHeight;
document.getElementById("img"+imgToDo).width = 125;
}
}
}
}
}
}
txtFile.send(null);
受Javascript影响的HTML
<table border="0" align="center" cellpadding="0" cellspacing="0" id="displayTable">
<tr><td colspan="10"><center><div id="displayText"></div></center></td></tr>
<tr><td colspan="10" align="center"><img src="" id="display" onClick="scaleDisplay()" ondblclick="dblClick('display')" /></td></tr>
<tr><td></td><td colspan="6"><hr /></td><td></td></tr>
<tr width="500" id="imgRow">
<td></td>
<td onclick="fullsize(0)" width="125" ondblclick="dblClick(0)"><img src="" width="125" id="img0"/></td>
<td onclick="fullsize(1)" width="125" ondblclick="dblClick(1)"><img src="" width="125" id="img1"/></td>
<td onclick="fullsize(2)" width="125" ondblclick="dblClick(2)"><img src="" width="125" id="img2"/></td>
<td onclick="fullsize(3)" width="125" ondblclick="dblClick(3)"><img src="" width="125" id="img3"/></td>
<td onclick="fullsize(4)" width="125" ondblclick="dblClick(4)"><img src="" width="125" id="img4"/></td>
<td onclick="fullsize(5)" width="125" ondblclick="dblClick(5)"><img src="" width="125" id="img5"/></td>
<td></td>
</tr>
<tr width="500" id="imgRow">
<td></td>
<td onclick="fullsize(6)" width="125" ondblclick="dblClick(6)"><img src="" width="125" id="img6"/></td>
<td onclick="fullsize(7)" width="125" ondblclick="dblClick(7)"><img src="" width="125" id="img7"/></td>
<td onclick="fullsize(8)" width="125" ondblclick="dblClick(8)"><img src="" width="125" id="img8"/></td>
<td onclick="fullsize(9)" width="125" ondblclick="dblClick(9)"><img src="" width="125" id="img9"/></td>
<td onclick="fullsize(10)" width="125" ondblclick="dblClick(10)"><img src="" width="125" id="img10"/></td>
<td onclick="fullsize(11)" width="125" ondblclick="dblClick(11)"><img src="" width="125" id="img11"/></td>
<td></td>
</tr>
<tr width="500" id="imgRow">
<td></td>
<td onclick="fullsize(12)" width="125" ondblclick="dblClick(12)"><img src="" width="125" id="img12"/></td>
<td onclick="fullsize(13)" width="125" ondblclick="dblClick(13)"><img src="" width="125" id="img13"/></td>
<td onclick="fullsize(14)" width="125" ondblclick="dblClick(14)"><img src="" width="125" id="img14"/></td>
<td onclick="fullsize(15)" width="125" ondblclick="dblClick(15)"><img src="" width="125" id="img15"/></td>
<td onclick="fullsize(16)" width="125" ondblclick="dblClick(16)"><img src="" width="125" id="img16"/></td>
<td onclick="fullsize(17)" width="125" ondblclick="dblClick(17)"><img src="" width="125" id="img17"/></td>
<td></td>
</tr>
<tr width="500" id="imgRow">
<td></td>
<td onclick="fullsize(18)" width="125" ondblclick="dblClick(18)"><img src="" width="125" id="img18"/></td>
<td onclick="fullsize(19)" width="125" ondblclick="dblClick(19)"><img src="" width="125" id="img19"/></td>
<td onclick="fullsize(20)" width="125" ondblclick="dblClick(20)"><img src="" width="125" id="img20"/></td>
<td onclick="fullsize(21)" width="125" ondblclick="dblClick(21)"><img src="" width="125" id="img21"/></td>
<td onclick="fullsize(22)" width="125" ondblclick="dblClick(22)"><img src="" width="125" id="img22"/></td>
<td onclick="fullsize(23)" width="125" ondblclick="dblClick(23)"><img src="" width="125" id="img23"/></td>
<td></td>
</tr>
<tr><td colspan="6" height="25"> </td></tr>
</table>
代码说明： 我给它一个数组中的项目列表，这些项目来自服务器上名为film1.txt的文件（就像一个电影胶片类型的东西，但我改变了主意）。它是这样的：“filedir / filename.jpg，文件标题，filedir / filename.jpg，文件标题，filedir / filename.jpg，文件标题”。它是.split（）到一个用“linesParted []”调用的数组。 for（）循环从0开始直到它不再是＆lt; （lineParted.length）/ 2。它创建一个新的Image（），为lines（）中的for（）循环时间2中测试的变量生成一个变量，在if（（）中测试该新变量是否为！=为null。如果没有，那么它将一个'style.cursor设置为“指针”，它设置了src，将Image（）的src设置为imgToDoTimes2，然后一旦加载，它设置宽度，然后设置高度比例。
问题： 出于某种原因，它设置了允许什么都不做的最后一个，因为它没有来自film1.txt的源数据到null，但是它留下了一个边界框类似于最后一个图像的东西不是空的。
以上是服务器上面的代码的完整版本，但有错误。请注意注释：3（通常位于顶部index.html）：http://greengoosemarketing.com/so/
其他资源链接位于该页面的注释中。
网站上的一个字： 该网站属于我的高级动画教师。在那里发布的作品主要是学生作品。 “Minecraft C4D Render”是我唯一的作品。 ：3
如果我能为您提供其他任何东西，请告诉我。
答案 0 :(得分：1)
问题很容易解决。您正在从for循环完成后调用的函数访问for索引变量。因此，您将始终获得一个值，该值等于该索引在for循环的最后一次迭代中所采用的数量。
解决这个问题的一种方法是：
imgToResize.imgIndex = imgToDo;
imgToResize.onload = function() {
var imgResizeNewHeight = (this.height*125)/this.width;
document.getElementById("img" + this.imgIndex).height = imgResizeNewHeight;
document.getElementById("img"+ this.imgIndex).width = 125;
}
您还可以在创建项目后使用其他方式访问该项目，但这似乎是最简单的方法。
您还可以为元素分配预定义的ID，然后在闭包中使用该ID。