4
我正在編寫一個挑戰，要求我使用jQuery創建一個棋盤，以及一個輸入表單，詢問遊戲板的大小（即6x6板，7x7板，等等。）。每當輸入是奇數時（即7x7板，9x9板，11x11板），我都很難進行奇數/偶數類分配。如果在將輸入＃增加到任何奇數時運行JS小提琴，奇數/偶數分配將「跳過」。製作一個動態的棋盤響應用戶輸入jQuery
$(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) {
\t //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
})//documenttable {
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」。這僅在電路板尺寸奇怪時纔會發生。
有誰知道爲什麼索引被跳過？
謝謝你的解決方案，因爲我我從這種方法中學到了很多東西，我知道使用一個標誌來指定下一行將如何開始;黑色或白色但是我之前對這個問題的疑問（似乎是索引問題？）沒有回答，據我所知，我的代碼應該適用於一個奇數大小的板子 – jaysonder
我從你的代碼中學到了很多東西，對我來說這種方法是「開箱即用」的，乾杯！ – jaysonder
我尊重那個;）你想明白你的錯誤......我試着在我最後的編輯中儘可能清楚地回答。 –