For循环后的神秘边界框（Javascript）

我有一个for（）循环，用于设置表中元素的src、height和width。我对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);

var txtFile=new XMLHttpRequest（）；
打开（“GET”，“film1.txt”，true）；
txtFile.onreadystatechange=函数（）{
if（txtFile.readyState==4）{//确保文档已准备好进行分析。
if（txtFile.status==200）{//确保找到该文件。
allText=txtFile.responseText；
linesParted=allText.split（，“”；//将每行分隔为一个数组
document.getElementById（“display”）.src=linesParted[0]；
document.getElementById（“displayText”）.innerHTML=linesParted[1]；
var dispResize=新图像（）；
dispResize.src=linesParted[0]；
dispResize.onload=函数（）{
var dispNewHeight=（this.height*（500））/this.width；
var dispNewWidth=500；
document.getElementById（“display”）.style.height=dispNewHeight；
document.getElementById（“display”）.style.width=dispNewWidth；
}               
//
var imgToDo；
对于（imgToDo=0；imgToDo<（（linesParted.length）/2）；imgToDo++）
{
var imgToResize=新图像（）；
imgToDoTimes2=linesParted[imgToDo*2]
如果（imgToDoTimes2！=null）{
document.getElementById（“img”+imgToDo）.style.cursor=“pointer”；
document.getElementById（“img”+imgToDo）.src=imgToDoTimes2；
imgToResize.src=imgToDoTimes2；
imgToResize.onload=函数（）{
var imgResizeNewHeight=（this.height*125）/this.width；
document.getElementById（“img”+imgToDo）。高度=imgResizeNewHeight；
document.getElementById（“img”+imgToDo）.width=125；
}
}
}
}
}
}
txtFile.send（空）；

受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">&nbsp;</td></tr>
                </table>

代码说明： 我给它一个数组中的项目列表，该列表由服务器上名为film1.txt的文件提供（类似于电影带类型的东西，…但我改变了主意）。它是这样的：“filedir/filename.jpg，文件标题，filedir/filename.jpg，文件标题，filedir/filename.jpg，文件标题”。它是.split（）到一个数组中，该数组通过“linesParted[]”从调用。for（）循环通过从0开始直到不再<（lineParted.length）/2来完成其工作。它生成一个新图像（），为在for（）循环中测试的变量生成一个变量乘以linesParted[]中的2，如果新变量为！=使无效。如果没有，则将的style.cursor设置为“pointer”，将的src设置为，将Image（）的src设置为imgToDoTimes2，然后在加载后，按比例设置宽度和高度

问题是： 出于某种原因，它将最后一个不允许执行任何操作的图像（因为它没有film1.txt中的源数据）设置为null，但它会留下一个边界框之类的东西，看起来与最后一个不为null的图像相同

以下是服务器上出现错误的上述代码的完整版本。注意注释：3（通常位于index.html顶部）：

其他资源链接位于该页的注释上

网站上的一个词： 这个网站属于我的高级动画老师。张贴在那里的作品主要是学生作品。“Minecraft C4D Render”是我唯一的作品三,

---

如果还有什么我可以提供给你的，请告诉我

这个问题很容易解决。您正在从for循环完成后调用的函数访问for index变量。因此，您将始终获得一个值，该值等于该索引在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。

Nope。我为他做这件事是出于我内心的善良。这是一个3D动画类，与HTML或Javascript无关。哦。。太好了。。。非常感谢。更新节目