JavaScript神秘地跳过了数组的第二个索引

JavaScript mysteriously skips over second index of an array

本文关键字：数组 第二个 索引 过了 JavaScript      更新时间：2023-09-26

我有以下(有点长)html代码:

<!DOCTYPE html>
<html>
<head>
    <script type = "text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    <script>
        $(document).ready(function(){
            var embargo_top = 0;
            var embargo_left = 0;
            var allowed = true;
            var to_delete = "";
            function initialize_board(){
                var random_array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
                var positions = ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten", "eleven", "twelve", "thirteen", "fourteen", "fifteen", "sixteen"];
                while (random_array.length > 0){
                    var rand = random_array[Math.floor(Math.random() * random_array.length)];
                    var pos = positions[Math.floor(Math.random() * positions.length)];
                    document.getElementById(pos).innerHTML = rand;
                    var index = random_array.indexOf(rand);
                    random_array.splice(index, 1);
                    var pos_index = positions.indexOf(pos);
                    positions.splice(pos_index, 1);
               }
               var div = "#" + positions[0];
               var coords = $(div).position();
               embargo_top = coords.top;
               embargo_left = coords.left;
               to_delete = positions[0];
               $(document.getElementById(positions[0])).hide();
           }
           initialize_board();
           function determine_solvability(){
               var num_inversions = 0;
               var array_inc = [];
               var possibilities = ["one", "two", "three", "four"];
               var to_add = 0;
               for(i = 0; i<possibilities.length; i++){
                   var tmp = document.getElementById(possibilities[i]);
                   var id = tmp.id;
                   alert(id);
                   var to_append = tmp.innerHTML;
                   array_inc.push(to_append);
                   console.log(array_inc);
                   num_inversions = check_tile(id, array_inc, num_inversions);
                }
                console.log(num_inversions);
            }
            determine_solvability();
            function check_tile(num, array_inc, num_inversions){
                console.log(array_inc);
                var div = document.getElementById(num);
                var val = div.innerHTML;
                if (val == 1){
                    return num_inversions;
                }
                else{
                    var count = 1;
                    for(i = 0; i < array_inc.length; i++){
                        var arraryTmp = parseInt(array_inc[i]);
                        var intVal = parseInt(val);
                        if (arraryTmp < intVal){
                           count += 1;
                        }
                    }
                    num_inversions += (val - count);
                    console.log(num_inversions);
                    return num_inversions;
                }   
           };
      });
</script>
</head>
<body>
    <table style = "width: 100%">
        <tr>
            <td><div class = "tile" id = "one"></div></td>
            <td><div class = "tile" id = "two"></div></td>
            <td><div class = "tile" id = "three"></div></td>
            <td><div class = "tile" id = "four"></div></td>
        </tr>
        <tr>
            <td><div class = "tile" id = "five"></div></td>
            <td><div class = "tile" id = "six"></div></td>
            <td><div class = "tile" id = "seven"></div></td>
            <td><div class = "tile" id = "eight"></div></td>
        </tr>
        <tr>
            <td><div class = "tile" id = "nine"></div></td>
            <td><div class = "tile" id = "ten"></div></td>
            <td><div class = "tile" id = "eleven"></div></td>
            <td><div class = "tile" id = "twelve"></div></td>
        </tr>
        <tr>
            <td><div class = "tile" id = "thirteen"></div></td>
            <td><div class = "tile" id = "fourteen"></div></td>
            <td><div class = "tile" id = "fifteen"></div></td>
            <td><div class = "tile" id = "sixteen"></div></td>
        </tr>
    </table>
</body>
</html>

在第二个脚本标记中的determine_solvability函数中，出现了一个有趣的现象。当我注释掉这一行时，

//num_inversions = check_tile(id, array_inc, num_inversions);

函数第一部分中的for循环按照我的期望在div id数组上执行。但是，当我取消前一行

的注释时
 num_inversions = check_tile(id, array_inc, num_inversions);

for循环完全跳过整个第二个索引，不会出错。这怎么可能呢?

注意:在您对此进行注释之前，脚本中的其他代码在4x4表上随机生成数字1-15。在某些情况下，顶部行(我将在determine_solvability()函数的for循环中遍历它)中只有三个tile/元素。我的问题是，当最上面一行有四个元素/贴图时，为什么迭代时总是跳过该行的第二个元素?(通过对array_inc执行console.log函数确认)

你的I变量是全局的，会被破坏

更改所有

for(i = 0 ...


for(var i = 0 ...
相关文章：