我正在创建一个简单的内存游戏,我几乎已经完成了所有的工作。然而,我希望能够用按钮设置不同的困难,但在单击按钮时调用我的函数来生成表会使代码的其余部分无效。这是我的密码。有人能告诉我为什么点击其中一个按钮"#容易,#中等,#难"会让表格单元格变得不可点击吗?
//Creates all of the variables to be manipulated later
var countCells;
var cardValues = [];
var checker = true;
var tempArr = [];
var winCounter = 0;
//Generates a table with the dimensions specified
var createTable = function (row, col) {
$('table').empty();
for (var i = 1; i <= row; i++) {
$('table').append($('<tr>'));
}
for (var j = 1; j <= col; j++) {
$('tr').append($('<td>'));
}
countCells = row * col;
};
createTable(3, 6);
//Creates a new game with various difficulties
$('#easy').click(function () {
createTable(2, 5);
});
$('#medium').click(function () {
createTable(3, 6);
});
$('#hard').click(function () {
createTable(4, 9);
});
//Adds a number for half of the cells into an array twice
for (var k = 1; k <= countCells / 2; k++) {
cardValues.push(k);
if (k === countCells / 2 && checker) {
checker = false;
k = 0;
}
}
//Adds a random number from the array to each of the cells
var giveCellValue = function () {
var len = cardValues.length;
for (var i = 0; i <= len; i++) {
var random = Math.ceil(Math.random() * cardValues.length) - 1;
$('td').eq(i).append(cardValues[random]);
cardValues.splice(random, 1);
}
};
giveCellValue();
//Checks for matches when cells are clicked
$('td').click(function () {
if ($(this).hasClass('clicked') || $(this).hasClass('completed')) {
$(this).stopPropagation();
$(this).preventDefault();
return;
}
$(this).addClass('clicked');
tempArr.push($(this).text());
var len = tempArr.length;
if (len > 1) {
if (tempArr[0] === tempArr[1]) {
alert("Good job!");
$('.clicked').addClass('completed');
$('.completed').removeClass('clicked');
winCounter = winCounter + 1;
} else {
alert("Try again!");
$('.clicked').removeClass('clicked');
}
tempArr.splice(0, 2);
}
if (winCounter === countCells / 2) {
alert('You won!');
}
console.log(countCells, winCounter);
});
td
的事件处理程序将丢失。您需要使用delegate/live或重新设置单击。
我花了一些时间修复了你的代码。http://jsfiddle.net/ncapito/bg2FH/
值得注意的变化
stopPropagation
和preventDefault
不在您正在单击的td"this"上,它们在传递给代理/单击函数的事件对象上。
我重构了按钮点击监听器来调用函数来重新设置内容。
$('#hard').click(function () {
createTable(4, 9);
addNumbers();
giveCellValue();
});
我创建了addNumbers
函数,您已经必须将其加回来。
将$('td').click
更改为
//Checks for matches when cells are clicked
$('table').on('click', 'td', function (event) {
如果在调用dom后向其添加一些内容,则不需要设置On will。
因为您正在清除附加了点击事件的td。尝试此更改:
-$('td').click(function () {
+$('td').live('click', function () {
您对$('table').empty()的调用;销毁表单元格和关联的事件处理程序。您需要为td重新绑定您的点击处理程序,或者更好地使用事件委派,如:
$('table').on('click', 'td', function() {
//your code here
});