范围问题，在另一个 for 循环中从一个 for 循环引用迭代器“i”

Question

问题

我认为这两个for loops 存在范围问题。它们每个都在迭代不同数量的项目。

• 我正在尝试弄清楚如何在第二个循环中从第一个循环引用 i 迭代器。
• 具体来说，我在第二个循环的 if 语句的 else 部分连接一个字符串，我需要能够同时引用 i 和 j

澄清

我正在尝试创建一个 11 x 8 的网格，总共 88 个正方形。他们需要附加一个特定的类，这将为正方形着色。每个方块都有一个从 1 到 88 的数据 ID，用于确定它们在网格上的位置。需要根据数据着色的状态/方块不是按data.jsonsn-p 中看到的顺序。

循环 #1

i 从 0、1、2 ... 50 开始

for (i = 0; i < data.length; i++) {}

循环 #2

j 从 1、2、3 ... 88 开始

for (j = 1; j < squaresTotal + 1; j++) {

    // If it doesn't exist, push those values into the an array
    if (states.indexOf(j) === -1){
        blanks.push(j);

        $("<div class='square is-white' data-id='" + j + "'></div>").appendTo(".map");
    } else {
        $("<div class='square " + data[i].class + "' data-id='" + j + "'><p class='square__state'>" + data[i].abbr + "</p></div>").appendTo(".map");
    }
}

scripts.js

<script>
        $(function(){
            $.ajax({
                url: 'data.json',
                method: 'GET',
                dataType: 'json'
            }).then(main);
        });

        function main(data) {

            // The parent container that holds the map
            let map = $(".map");

            // IDs of the states and the blank tiles
            let blanks = [];
            let states = [];

            // Contains data for all 50 states
            for (i = 0; i < data.length; i++) {

                // Data is sorted by the rank field in descending order
                data.sort(function(a, b){
                    return a['rank'] - b['rank'];
                });

                // Fields for the data table below the map
                // Numbered rank (i.e. 1, 2, 3)
                let rank = data[i].rank;

                // Full state name (i.e. Alaska)
                let state = data[i].state;

                // Total consumer electric power
                let value = (data[i].total_consumption_electric_power).toLocaleString();

                // Each row in the table contains a rank, state and value
                if (rank) {
                    $("<tr><th scope='row'>" + data[i].rank + "</th><td>" + data[i].state + "</td><td>" + value + "</td></tr>").appendTo("tbody");
                }

                // Push the ids to the empty states array
                states.push(data[i].id);
            }

            // The grid is 11 by 8 for a total of 88 squares
            const squaresTotal = 88;

            for (j = 1; j < squaresTotal + 1; j++) {

                // If it doesn't exist, push those values into the an array
                if (states.indexOf(j) === -1){
                    blanks.push(j);

                    $("<div class='square is-white' data-id='" + j + "'></div>").appendTo(".map");
                } else {
                    $("<div class='square " + data[i].class + "' data-id='" + j + "'><p class='square__state'>" + data[i].abbr + "</p></div>").appendTo(".map");
                }
            }

            var pymChild = new pym.Child();
            pymChild.sendHeight();
        }


    </script>

data.json（片段）

[
  {
    "id": 1,
    "state": "Alaska",
    "rank": "",
    "abbr": "AK",
    "class": "square-1",
    "total_consumption_electric_power": 707913
  },
  {
    "id": 11,
    "state": "Maine",
    "rank": "",
    "abbr": "ME",
    "class": "square-1",
    "total_consumption_electric_power": 62360
  },
  {
    "id": 17,
    "state": "Wisconsin",
    "rank": "",
    "abbr": "WI",
    "class": "square-5",
    "total_consumption_electric_power": 19482575
  }
]

Answer 1

我已经简化了一些代码，以展示我将如何尝试构建代码。

如果你想使用 JQuery 进行渲染，它很容易转换回来。

这并不能回答您的索引i、索引j 的问题，因为您实际上并不需要那些以我个人认为更简单的方式来执行此操作。

var states = [
  {
    "id": 1,
    "state": "Alaska",
    "rank": 2,
    "abbr": "AK",
    "class": "square-1",
    "total_consumption_electric_power": 707913
  },
  {
    "id": 11,
    "state": "Maine",
    "rank": 3,
    "abbr": "ME",
    "class": "square-1",
    "total_consumption_electric_power": 62360
  },
  {
    "id": 17,
    "state": "Wisconsin",
    "rank": 1,
    "abbr": "WI",
    "class": "square-5",
    "total_consumption_electric_power": 19482575
  }
];

var render_rankings_table = function( states ) {
  // We want the table to be sorted by rank.
  // By creating a new array from the passed states array,
  // we retain the original order inside the states array.
  var sorted_by_rank = states.sort((a, b ) => a.rank - b.rank );
  // Create a row for each sorted_by_rank state.
  // Since this is a new array, we can just loop over it without affecting the original states array.
  var rows_html = sorted_by_rank.map( state => {
    return `<tr><td scope="row">${ state.rank }</td><td>${ state.state }</td><td>${ state.total_consumption_electric_power }</td></tr>`;
  });
  // Overwrite the content of the table to render it.
  // See how we update the table only once at the end instead of for every state individually.
  var table = document.querySelector( '#electric_consumption_ranking' );
  table.innerHTML = rows_html.join( '' );
};

// The original contains: if (states.indexOf(j) === -1){ blanks.push(j); }
// The states array contained all the id's.
// So translated, this means that the id of the state, equals the square it will render to.
// So Maine, with id 11, will be the eleventh square.
var render_squares = function( states ) {
  // Creating the 88 squares and mapping the states to it can be done in multiple ways.
  // I would prefer the 'easy' solution of just creating an array with 88 elements and
  // then putting the states in the correct position,
  // instead of figuring out the position of the state inside the loop.
  var squares = Array.from({ length: 88 }).fill( false );
  // We now have an array cotnaining 'false' 88 times.
  // Now lets add the states to it.
  // The squares start at 1, the array index starts at 0, so subtract 1 from the id to get the correct index.
  states.forEach( state => { squares[ state.id - 1 ] = state; });
  // Now all the states are in the correct position, according to their id.
  // Create the squares.
  var squares_html = squares.map(( state, index ) => {
    if ( state ) {
      return `<div class="square ${ state.class }" data-id="${ index + 1 }"><p class="square__state">${ state.abbr }</p></div>`;
    
    }
    // The data-ids start at 1, the array index starts at 0, so add 1 to the index.
    // The <div> has to have height to actually show up on the screen.
    // The easiest way is to make sure the div contains text, so adding a space already works.
    // We could also give the divs a minimum height with CSS.
    else {
      return `<div class='square is-white' data-id="${ index + 1 }">&nbsp;</div>`;
    }
  });
  // Overwrite the map.
  var map = document.querySelector( '.map' );
  map.innerHTML = squares_html.join( '' );
};

render_rankings_table( states );
render_squares( states );

table {
  border-collapse: collapse;
}

td {
  border: 1px solid grey;
}

.square {
  border-bottom: 1px solid grey;
  border-top: 1px solid grey;
}

.map {
  border: 1px solid grey;
}
.is-white {
  background-color: rgb( 238, 238, 238 );
}
.square-1 {
  background-color: red;  
}
.square-5 {
  background-color: green;
}

<table id="electric_consumption_ranking"></table>
<figure class="map"></figure>