游戏板

Question

我正在尝试创建一个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);   
});
});

Answer 1

您需要添加checkerboard = [];作为function1定义中的第一行，并将$('tbody').append(checkerBoard);更改为$('tbody').empty().append(checkerBoard);。虽然我建议将checkerboard变量移动到函数中，如果可能的话，每次调用function1时都会重新创建变量，而不是必须清除的全局变量。

您需要重置棋盘变量的原因是因为您当前正在使用checkerboard.push()，它会将新tr附加到数组的末尾并使其成为您所有原始行加上你要添加的新内容。

您需要致电.empty()的原因基本上与上述相同。 .append()在现有行之后添加新行。调用.empty()将在添加新行之前删除现有行。

jQuery checkerBoard板大小调整

游戏板

1 个答案: