3

我有一个 for() 循环,用于设置表格中元素的 src、高度和宽度。我对 Javascript 相当陌生(大约 2-3 周,自学),但我在游戏 Second Life 中使用 Line Scripting Language (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">&nbsp;</td></tr>
                </table>

代码说明:我给它一个数组中的项目列表,该列表由服务器上名为film1.txt 的文件提供(就像幻灯片类型的东西,.. 但我改变了主意)。它是这样的:“filedir/filename.jpg,File Title,filedir/filename.jpg,File Title,filedir/filename.jpg,File Title”。它将 .split() 转换为一个数组,该数组使用“linesParted[]”调用。for() 循环通过从 0 开始直到它不再是 < (lineParted.length)/2 来完成它的工作。它创建一个新的 Image(),为在 for() 循环中测试的变量创建一个变量,在linesParted[] 中乘以 2,如果该新变量为 != 为 null,则在 if() 中进行测试。如果不是,则将 's style.cursor 设置为“指针”,将 src 设置为 src,将 Image() 的 src 设置为 imgToDoTimes2,然后一旦加载,

问题:由于某种原因,它将允许它不做任何事情的最后一个设置为空,因为它没有来自 film1.txt 的源数据,但它留下了一个边界框之类的东西,看起来与最后一个不为空的图像。

这是服务器上出现错误的上述代码的完整版本。注意注释:3(通常在顶部 index.html): http: //greengoosemarketing.com/so/

其他资源链接位于该页面的注释中。

在它所在的网站上的一句话:该网站属于我的高级动画老师。在那里张贴的作品将主要是学生的作品。“我的世界 C4D 渲染”是我唯一的作品。:3

让我知道我是否可以为您提供其他任何东西。

4

1 回答 1

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。

于 2012-10-20T02:08:51.423 回答