Ich arbeite an einer Codierungsherausforderung, die mich auffordert, ein Schachbrett mit jQuery zu erstellen, zusammen mit einem Eingabeformular, das fragt, wie groß das Spielbrett sein wird (zB 6x6 Board, 7x7 Board, etc.). Ich habe Schwierigkeiten mit der ungeraden/geraden Klassenzuweisung für immer dann, wenn die Eingabe eine ungerade Zahl ist (d. H. 7x7-Karte, 9x9-Karte, 11x11-Karte). Wenn Sie die JS-Geige ausführen, wenn Sie Input # auf eine ungerade Zahl erhöhen, "springt" die ungerade/gerade Zuweisung.Erstellen Sie ein dynamisches Schachbrett, das auf Benutzereingaben reagiert 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>Wenn Sie den Inspektoren Werkzeug nach oben ziehen und klicken Sie auf ‚übersprungen‘ Reihe (ex. Dritte Reihe) und es in der ersten Reihe vergleichen, beide Reihen werden erkannt als und „selbst "Reihe, aber das erste td-Element unterscheidet sich. Die erste td/"Spalte" der Zeile 1 wird als td: even gezogen. Jedoch wird die erste td/"Spalte" der dritten Reihe als td: ungerade gezogen. Aus meiner Kenntnis scheint es, dass nach jedem Zeilenpaar (1 ungerade Zeile & 1 gerade Zeile) die Indexierung überspringt, die erste Spalte ist "1", wenn es "0" sein sollte. Dies tritt nur auf, wenn die Boardgröße ungerade ist.
Weiß jemand, warum der Index übersprungen wird?
Vielen Dank für diese Lösung, wie ich Ich verstehe, wie man mit einer Fahne angibt, wie die nächste Zeile beginnen soll, schwarz oder weiß.Jedoch ist meine vorherige Frage zu dem Thema (was wie ein Indizierungsproblem scheint?) nicht beantwortet und meines Wissens nach meine Code sollte für eine ungerade Größe Board arbeiten. – jaysonder
Ich habe viel von Ihrem Code gelernt, und der Ansatz war "out of the box" für mich. Prost! – jaysonder
Ich respektiere das;) Sie wollen Ihren Fehler verstehen ... Ich habe versucht, so klar wie möglich in meinem letzten Schnitt zu antworten. –