个人中心
gpt4 book ai didi

jquery - 制作一个响应用户输入的动态棋盘 jQuery

转载 作者：行者123 更新时间：2023-12-01 00:22:10 31 4
gpt4 key购买 nike

我正在进行一项编码挑战，要求我使用 jQuery 创建一个棋盘，以及一个询问游戏板有多大(即 6x6 棋盘、7x7 棋盘等)的输入表单。每当输入是奇数(即 7x7 板、9x9 板、11x11 板)时，我就很难进行奇数/偶数类分配。如果您在将输入 # 增加到任何奇数时运行 JS fiddle，则奇/偶分配将“跳过”。

$(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>

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

有人知道为什么索引被跳过吗？

最佳答案

用一个 bool 标志来确定你在哪里分配一个类怎么样？

首先，在“创建”按钮点击处理程序中声明一个 bool 变量:

var toggleFlag = true;

然后，在您的 for 中循环，您可以在其中“计算” td 的数量在每一行中，您可以立即分配一个类别:

//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;
}

最后，当您点击“让我们玩”按钮添加棋子时，您可以选择 td使用奇数类而不是 :odd或:even选择器。

$('#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');

此逻辑适用于均匀数量的正方形。
但如果数量为奇数，你就会致命地得到 1 的偏移量。

这就是造成“二乘二”行分组效果的原因。 因此，您必须在每一行都有此代码块的“备用逻辑”。
这并不简单。
这就是为什么我通过在循环 td 的循环中分配类来解决代码中较早的问题。一点一点。

为了说明这一点，我制作了 another CodePen .
它清楚地表明这个选择器 $('.trOdd td:odd')选择全部td在奇数 tr 中有奇数类...但不仅仅是一行!就像我确信您在想...它不会像人类那样一一获取行。它抓取所有表格来收集匹配的元素。

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

关于jquery - 制作一个响应用户输入的动态棋盘 jQuery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38757522/

31 4 0
文章推荐： javascript - 如何使用 jQuery 删除动态添加的行
文章推荐： java-8 - Java 8 Stream Filter总是返回一个空列表
文章推荐： python - 为什么神经网络不学习曲线？
文章推荐： Silverstripe 4 - CSS 和 JS 要求。如何/什么填充/resources 目录？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com