我一直在搞乱代码,一次只能更改一张图片和标题。
之后,它将等待几秒钟,然后更改下一张图片,依此类推。

编辑:由于(pic + 1)不起作用,我重做了解决方案。该程序将更改第一张图像,然后在更改下一张图像时将引发错误。

javascript - 遍历表格并一次更改一张图片和标题-LMLPHP

然后调试器进入Internet Explorer
javascript - 遍历表格并一次更改一张图片和标题-LMLPHP

有没有办法将4个if语句的逻辑组合成一个可能的块?例如,如果iter为1,它将选择相同的代码,但目标为pic1&link1。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>

        //array for pictures
        var pics = new Array("images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg", "images/5.jpg", "images/6.jpg",
            "images/7.jpg", "images/8.jpg", "images/9.jpg", "images/10.jpg", "images/11.jpg", "images/12.jpg", "images/13.jpg",
            "images/14.jpg", "images/15.jpg", "images/16.jpg", "images/17.jpg", "images/18.jpg", "images/19.jpg", "images/20.jpg",
            "images/21.JPG", "images/22.jpg", "images/23.jpg", "images/24.jpg", "images/25.jpg", "images/27.jpg", "images/28.jpg",
            "images/29.jpg", "images/30.jpg", "images/31.jpg", "images/32.jpg", "images/33.jpg", "images/34.jpg", "images/35.jpg",
            "images/36.jpg");


        //Array for labels
        var labels = new Array("Dolly's Doll House", "Austin's Odds & Ends", "TJ's Sandwich Shoppe ", "Joey's Collectable Posters ", "Tom's Junk Trunk", "Treasure's Bottles",
            "Earthenware Containers", "Paul's Pottery", "Kelly's Coffee Collectables", "Barry's Bottles", "Belinda's Beads", "Saturday Nite at the Flea!", "Tollie's T-Shirts",
            "TJ's Patrons", "Polly's Pictures", "Dolly's Doll House", "Carl's Collectable Caps", "Central's Backyard Scene", "Callie's Coats", "Coffee at TJ's!",
            "Jennifer's Junk Stuff", "My Secret Flea Market", "Flea's Front Yard", "Old No. 9", "Jackies Junk Shoppe", "Quapaw Gourds", "Hallie's Handbags",
            "Happy Patrons at the Flea!", "UCA Students Cheer Us!", "Opening Up the Flea Market", "Young Patron", "Native American Wares", "Billy's Musical Instruments",
            "Tollie's Tools", "Marie's Shop", "Candy Land Games and Toys");

        // old value for changing all 4 at the same time
        var c = 0;

        var iter = 0;
        var x;
        var y;

        //time
        var timer = 0;

        function setPics() {
            //Set pic
            x = document.getElementById("pic0").src = pics[c];
            //document.getElementById("pic1").src = pics[c + 1];
            //document.getElementById("pic2").src = pics[c + 2];
            //document.getElementById("pic3").src = pics[c + 3];

            //Set labels
            y = document.getElementById("link0").innerHTML = labels[c];
            //document.getElementById("link1").innerHTML = labels[c + 1];
            //document.getElementById("link2").innerHTML = labels[c + 2];
            //document.getElementById("link3").innerHTML = labels[c + 3];

            // shift array to 5
            c = 5;


            timer = setTimeout("changePic()", 4000);
        }


        function changePic() {
            if (c >= 36) {
                c = 0;
                setPics();
            }

            // change element 1
            if (iter == 0) {
                x = document.getElementById("pic0").src = pics[c];
                y = document.getElementById("link0").innerHTML = labels[c];
            }

            // change element 2
            if (iter == 1) {
                x = document.getElementById("pic1").src = pics[c];
                y = document.getElementById("link1").innerHTML = labels[c];
            }

            // change element 3
            if (iter == 2) {
                x = document.getElementById("pic2").src = pics[c];
                y = document.getElementById("link2").innerHTML = labels[c];
            }

            // change element 4
            if (iter == 3) {
                x = document.getElementById("pic3").src = pics[c];
                y = document.getElementById("link3").innerHTML = labels[c];
            }

            // restart to element 1
            if (iter >= 3) {
                iter = 0;
            }

            c++;
            iter++;
            timer = setTimeout("changePic()", 4000);
        }


    </script>
</head>
<body onLoad="setPics()">

    <table class="items" align="center" width="10%" border="0px" cellpadding="0">
        <tr>
            <td align="left">
                <img src="images/1.jpg" id="pic0"  border="0"/>
                <br />
                <span class="imgTitle" id ="link0">Dolly's Doll House</span>
            </td>
            <td align="left">
                <img src="images/2.jpg" id="pic2"  border="0"/>
                <br />
                <span class="imgTitle" id="link2">Austins Odds and Ends</span>
            </td>
        </tr>
        <tr>
            <td align="left">
               <img src="images/3.jpg" id="pic3" />
               <br />
               <span class="imgTitle" id="link3">TJ's Sandwich </span>
            </td>
            <td align="left">
                <img src="images/4.jpg" id="pic4" />
                <br />
                <span class="imgTitle" id="link4">Joey's Collectible Posters</span>
            </td>
        </tr>
    </table>

</body>

</html>
'''

最佳答案

您的for循环没有条件语句,该语句在其中评估为继续。在第一个循环中检查i变量是否小于table.rows.length属性,在第二个循环中检查j小于row.cells.length属性。

for (var i = 0, row; i < table.rows.length; i++) {
  row = table.rows[i];
  for (var j = 0, col; j < row.cells.length ; j++) {
    col = row.cells[j]
    document.getElementbyId("pic" + i).src = pics[i][j];
    document.getElementById("link" + i).innerHTML = labels[i][j];
  }
}


或者使用更现代的for...of循环,使遍历HTMLCollectiontable.rowsrow.cells对象的复杂性降低。

for (let row of table.rows) {
  for (let cell of row.cells) {
    ...
  }
}

10-06 07:58