我正在尝试创建一个 jQuery CheckerBoard,到目前为止我已经有了这么多,一切似乎都工作正常,但是我输入的所有内容都是新数字,它会附加到现有的棋盘上,如何编辑我的代码以便每次我在输入框中输入一个新数字时,棋盘都会更改为该大小并且不会附加到它上面,这是我到目前为止所得到的,我被告知有两个原因导致它不断增长首先不是重置,而是 var checkerBoard = [];存储在全局范围内,它将更多的棋盘格放入数组中,并且要覆盖以前的内容,我需要使用 .html(),但不应该确定应该如何完成,请帮助
HTML
游戏板
<table id="gameBoard">
<tbody></tbody>
</table>
Javascript
var checkerBoard = [];
$(document).ready(function(){
var function1 = function(calcs){
for(var i = 0; i < calcs; i++){
var trOdd = $('<tr>').addClass('odd');
var trEven = $('<tr>').addClass('even');
if(calcs % 2 !== 0 && i % 2 !== 0){ checkerBoard.push(trOdd); }
else if(calcs % 2 !== 0 && i % 2 === 0) { checkerBoard.push(trOdd); }
else if(calcs % 2 === 0 && i % 2 !== 0){ checkerBoard.push(trEven); }
else{ checkerBoard.push(trOdd); }
for(var j = 0; j < calcs; j++){
checkerBoard[i].append('<td>');
}
}
$('tbody').append(checkerBoard);
$( ".odd td:odd" ).css( "background-color", "red" );
$( ".odd td:even" ).css( "background-color", "black" );
$( ".even td:odd" ).css( "background-color", "black" );
$( ".even td:even" ).css( "background-color", "red" );
$('#gameBoard').css({
'border-collapse' : 'collapse',
'border' : 'solid 1px black'
});
$('td').css({
'width' : '30px',
'height' : '30px'
});
}
$("[name=INPUT1]").change(function(){
var calc = $(this).val();
$("[name=OUTPUT1]").val(calc);
console.log(calc);
function1(calc);
});
});
最佳答案
您需要添加 checkerboard = [];
作为 function1 定义中的第一行,并将 $('tbody').append(checkerBoard);
更改为 $('tbody').empty().append(checkerBoard);
。不过,如果可能的话,我建议将棋盘变量移到函数中,以便每次调用 function1
时都会重新创建该变量,而不是成为必须清除的全局变量。
您需要重置棋盘变量的原因是因为当前您正在使用checkerboard.push()
,它将把新的 tr 附加到数组的末尾并使其成为您的所有原始行以及您添加的新行。
需要调用.empty()
的原因与上面基本相同。 .append()
在现有行之后添加新行。调用 .empty()
将在添加新行之前删除现有行。
关于javascript - jQuery checkerBoard 调整棋盘尺寸,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36380168/