使动态棋盘响应用户输入 jQuery

Question

我正在应对一项编码挑战，要求我使用 jQuery 创建一个棋盘，以及一个询问游戏板有多大（即 6x6 棋盘、7x7 棋盘等）的输入表单.每当输入为奇数（即 7x7 板、9x9 板、11x11 板）时，我在 odd/even class 分配时遇到困难。如果你运行 JS fiddle 增加输入#到任何奇数时， odd/even 赋值 "skips".

$(document).ready(function() {
    
  //create input form for number/size of board
  $('h1').append('<div class=div1>Size of Board: <input type="text" id = "size1" name="size2" min = "2" max = "100" step = "2" value = "6"><input type="submit" id="submit1" value="Create"></div>')
 
  //create button to print Game Pieces 
  $('h1').append('<div><input type="submit" id="submitForm" value="Lets Play!"></div>');
  
  
  var z = '';
  //on clicking the button, create array of empty boxes/<td>
  $('#submit1').click(function() {
    var array = [];
    //remove previous appended array
    $('tbody').empty();

    //grab current value or size of gameboard
    z = $('#size1').val();
    
      //with a for loop, create "empty" table (z by z) of boxes
      for (var i=0; i<z; i++) {
        //addClass so we can grab later for color assignment
        var trEven = $('<tr>').addClass('trEven');
        var trOdd = $('<tr>').addClass('trOdd');
        //Differentiate between row to row: assign class trEven and trOdd to every other row      
        if (i%2 == 0) {
          array.push(trEven);
        }
        else {
          array.push(trOdd);
        }
        //for each row add z number of td's
          for (var j=0; j<z; j++) {
            array[i].append('<td></td>');
          }
      } 

    //append updated array to <tbody>
    $('tbody').append(array);
    //select all evens/odds of trOdd/trEven to assign colors using special selectors
    $('.trOdd td:odd').css('background-color', 'black'); 
    $('.trOdd td:even').css('background-color', 'white'); 
    $('.trEven td:odd').css('background-color', 'white');
    $('.trEven td:even').css('background-color', 'black'); 

  });//onclick function
  
  
  //Play Button: add game pieces
  $('#submitForm').click(function(){
    if (z <= 6) {
      //first two rows
      $('#gameBoard tr:eq(0) td:odd').append('<div class="gamePiece">')
      $('#gameBoard tr:eq(1) td:even').append('<div class="gamePiece">')
      //last two rows
      $('#gameBoard tr:last td:even').append('<div class="gamePiece">')
      $('#gameBoard tr:nth-last-child(2) td:odd').append('<div class="gamePiece">')
    }
    else if (z > 6) {
   //first three rows
      $('#gameBoard tr:eq(0) td:odd').append('<div class="gamePiece">')
      $('#gameBoard tr:eq(1) td:even').append('<div class="gamePiece">')
      $('#gameBoard tr:eq(2) td:odd').append('<div class="gamePiece">')
      //last three rows
      $('#gameBoard tr:last td:even').append('<div class="gamePiece">')
      $('#gameBoard tr:nth-last-child(2) td:odd').append('<div class="gamePiece">')
      $('#gameBoard tr:nth-last-child(3) td:even').append('<div class="gamePiece">') 
    }

  })//onclick function
  
  
})//document

table {
  border: solid 1px black;
  border-spacing: 0px;
}
td {
  width: 50px;
  height: 50px;
}
.div1 {
  font-size: medium;
}
.gamePiece {
  border-radius: 100%;
  height: 100%;
  width: 100%;
  background-color: red;
}

<!DOCTYPE html>

<body>
  <h1>Game Board</h1>
  <table id="gameBoard">
    <tbody></tbody>
  </table>
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
</body>

如果您拉起检查器工具并单击 'skipped' 行（例如第三行）并将其与第一行进行比较，则这两行都被识别为 "even" 行，但是第一个 td 元素不同。第 1 行的第一个 td/"column" 被拉为 td:even。但是，第三行的第一个 td/"column" 被拉为 td:odd。据我所知，似乎在每对行（1 个奇数行和 1 个偶数行）之后，索引会跳过，第一列是“1”，而它应该是“0”。这仅在电路板尺寸为奇数时发生。

有谁知道为什么要跳过索引？

Answer 1

一切都是为了 CSS。尝试从 JS 中脱颖而出，将 class 分配给奇数和偶数元素，但使用 CSS 分配给 select 正确的元素。

$(document).ready(function() {

    //create input form for number/size of board
    $('h1').append('<div class=div1>Size of Board: <input type="text" id = "size1" name="size2" min = "2" max = "100" step = "2" value = "6"><input type="submit" id="submit1" value="Create"></div>')

    //create button to print Game Pieces 
    $('h1').append('<div><input type="submit" id="submitForm" value="Lets Play!"></div>');


    var z = '';
    //on clicking the button, create array of empty boxes/<td>
    $('#submit1').click(function() {
      var array = [];
      //remove previous appended array
      $('tbody').empty();

      //grab current value or size of gameboard
      z = $('#size1').val();

      //with a for loop, create "empty" table (z by z) of boxes
      for (var i = 0; i < z; i++) {
        //addClass so we can grab later for color assignment
        var trEven = $('<tr>').addClass('trEven');
        var trOdd = $('<tr>').addClass('trOdd');
        //Differentiate between row to row: assign class trEven and trOdd to every other row      
        if (i % 2 == 0) {
          array.push(trEven);
        } else {
          array.push(trOdd);
        }
        //for each row add z number of td's
        for (var j = 0; j < z; j++) {
          array[i].append('<td></td>');
        }
      }

      //append updated array to <tbody>
      $('tbody').append(array);
      //select all evens/odds of trOdd/trEven to assign colors using special selectors
      $('.trOdd td:odd').addClass('even');
      $('.trOdd td:even').addClass('odd');
      $('.trEven td:odd').addClass('odd');
      $('.trEven td:even').addClass('even');

    }); //onclick function


    //Play Button: add game pieces
    $('#submitForm').click(function() {
        if (z <= 6) {
          //first two rows
          $('#gameBoard tr:eq(0) td:odd').append('<div class="gamePiece">')
          $('#gameBoard tr:eq(1) td:even').append('<div class="gamePiece">')
            //last two rows
          $('#gameBoard tr:last td:even').append('<div class="gamePiece">')
          $('#gameBoard tr:nth-last-child(2) td:odd').append('<div class="gamePiece">')
        } else if (z > 6) {
          //first three rows
          $('#gameBoard tr:eq(0) td:odd').append('<div class="gamePiece">')
          $('#gameBoard tr:eq(1) td:even').append('<div class="gamePiece">')
          $('#gameBoard tr:eq(2) td:odd').append('<div class="gamePiece">')
            //last three rows
          $('#gameBoard tr:last td:even').append('<div class="gamePiece">')
          $('#gameBoard tr:nth-last-child(2) td:odd').append('<div class="gamePiece">')
          $('#gameBoard tr:nth-last-child(3) td:even').append('<div class="gamePiece">')
        }

      }) //onclick function


  }) //document

table {
  border: 1px solid #000;
}

td {
  background-color: #fff;
  height: 50px;
  width: 50px;
}

td:nth-child(2n) {
  background-color: #000;
}

tr:nth-child(2n) td {
  background-color: #000;
}

tr:nth-child(2n) td:nth-child(2n) {
  background-color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Game Board</h1>
  <table id="gameBoard">
    <tbody></tbody>
  </table>

Answer 2

布尔标志如何确定您在何处分配 class？

首先，在 "Create" 按钮点击处理程序中声明一个布尔变量：

var toggleFlag = true;

然后，在你的 for 循环中，你 "count" 每行中 td 的数量，你可以立即分配一个 class：

//for each row add z number of td's
for (var j = 0; j < z; j++) {
    if(toggleFlag){
        array[i].append('<td class="odd"></td>');
    }else{
        array[i].append('<td class="even"></td>');
    }
    // Toggle the flag for next iteration
    toggleFlag=!toggleFlag;
}

一旦这个循环完成，检查你是否应该在每行上有奇数或偶数的 td ......因为如果它是奇数，你必须再次切换：

// If rows contain an even amout of td, toggle again before looping to next row
if(z % 2 == 0){
    toggleFlag=!toggleFlag;
}

最后，当您点击 "Let's play" 按钮添加棋子时，您可以 select td 使用奇数 class 而不是 :odd 或 :even select 或.

$('#gameBoard tr:nth-last-child(3) td.odd').append('<div class="gamePiece">')

See this working CodePen
;)

编辑解释初始错误

您的代码中的错误位于这些行中：

$('.trOdd td:odd').css('background-color', 'black'); 
$('.trOdd td:even').css('background-color', 'white'); 
$('.trEven td:odd').css('background-color', 'white');
$('.trEven td:even').css('background-color', 'black');

这个逻辑适用于偶数个方块。
但是如果数量是奇数，你会致命地得到一个偏移量。

这就是 "two by two" 行分组效果的原因。
所以你必须有一个 "alternated logic" 这个代码块......在每一行。
这不是很简单。
这就是为什么我通过在循环中分配 classes 来逐一循环 tds 来解决代码中的问题。

为了说明这一点，我制作了 another CodePen。
它清楚地表明，这个 selector $('.trOdd td:odd') selects ALL td 有一个奇数 class tr... 但不仅仅是一行！ 就像我确定您在想...它不会像人类那样一排排.它抓取所有 table 来收集匹配的元素。

看到了吗？对于 jQuery，只有两行（trOdd 和 trEven）...
;)

使动态棋盘响应用户输入 jQuery

Make a dynamic checkerboard responsive to user input jQuery

jquery

user-input

html-table

dynamic