jQuery:检查元素是否有类，然后执行函数
我是第一次学习Javascript。我在做一个井字游戏。这可能不是最好的编码方式，但我决定使用以下策略：
#中的每个网格都有自己的div。如果一个div被"X“占据，它将得到一个新的类"xClass"；同样，如果它被"O”占据，它的新类是"oClass“。
我想编写一个名为winCheck()的函数，该函数检查游戏中是否有任何获胜的组合将其类更改为全X或全O。我已经在jQuery中为div提供了自己的变量。
var winningCombos = [
[box1, box2, box3],
[box4, box5, box6],
[box7, box8, box9],
[box1, box4, box7],
[box2, box5, box8],
[box3, box6, box9],
[box1, box5, box9],
[box3, box5, box7]
];因此，例如，如果box1、box2和box3都被X占用，则它们的类将更改为"xClass“，并且X将获胜。我可以使用什么函数来验证它们的类是否已更改？
我尝试过以下几种方法：
if (winningCombos[i].children().className === "xClass") {
alert("Player 1 has won!");我也在尝试.hasClass()方法，这行得通吗？
if (winningCombos[i].children.hasClass("xClass") === "true" {
alert("Player 1 has won!");有人能帮上忙吗？
回答 3
Stack Overflow用户
发布于 2015-12-18 00:42:33
另一种方法是为每个获胜的组合设置一个唯一的类名。因此，框1、2和3将有一个共享标识符类。
因此，根据您的二维数组判断，最终将得到八个标识符类。
如果div被允许为“X”、“O”或两者都不是。
// Giving the identifier 'tttX' as the class name, X being the unique
// Could make that an array itself. I am going for quick and dirty here
$(".board div").click(function(e){
var winningComboArrayLength = 8; // If the board went to 4x4 it would be 16
var winningConditionLength = 3;
for(var i = 0; i < winningComboArrayLength; i++){
if($("div.xClass.ttt" + i.toString()).length == winningConditionLength){
// X won logic
alert('X player won!');
}
else if($("div.oClass.ttt" + i.toString()).length == 3){
// O won logic
alert('O player won!');
}
}
}); 然后以不同的方式遍历该数组以检查获胜条件。
var winningCombos = [];
$(function(){ winningCombos = [
$('#box1,#box2,#box3'),
$('#box4,#box5,#box6'),
$('#box7,#box8,#box9'),
$('#box1,#box4,#box7'),
$('#box2,#box5,#box8'),
$('#box3,#box6,#box9'),
$('#box1,#box5,#box9'),
$('#box3,#box5,#box7')
];
$(".board div").click(function(e){
var winningConditionLength = 3;
var maxLength = 0;
for(var i = 0; i < winningCombos.length; i++){
if(winningCombos[i].filter('.xClass').length == winningConditionLength){
// X won logic
$('.result').text('X player won!');
}
else if(winningCombos[i].filter('.oClass').length == winningConditionLength){
// O won logic
$('.result').text('O player won!');
}
}
});
});Stack Overflow用户
发布于 2015-12-17 07:55:55
我看到您在winningCombos中有嵌套数组，在后面的代码中不是这样使用的，所以我希望它是这样的，
var winningCombos = [
box1, box2, box3,
box4, box5, box6,
box7, box8, box9,
box1, box4, box7,
box2, box5, box8,
box3, box6, box9,
box1, box5, box9,
box3, box5, box7
];Stack Overflow用户
发布于 2015-12-17 08:11:10
是的，hasClass()更好。但是你混合了Javascript对象、数组和jQuery对象。您只能在jQuery对象上使用children()，在Javascript DOM对象上只能使用className。
所以，你必须在一个周期中检查每种获胜策略。例如，如果box1是包装第一个tic-tac-toe div的jQuery对象，这应该是可行的：
/**
* Returns true, if a player with a given symbol won, false otherwise
*/
function checkIfWon(symbol) {
for (var i = 0; i < winningCombos.size(); i++) {
var hits = 0;
for (var j = 0; j < 3; j++) {
if (winningCombos[i][j].hasClass(symbol + "Class")) {
hits++;
} else {
break; // no need to check this combo on
}
}
if (hits === 3) {
// we got a winning combo!
return true;
}
}
return false;
}
if (checkIfWon('x')) {
alert('First player won!');
} else if (checkIfWon('o')) {
alert('Second player won!');
}https://stackoverflow.com/questions/34324046
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号