如何移动到下一个 td 并检查 Css 类？答案

【问题标题】：How to move to the next td and check for Css class?如何移动到下一个 td 并检查 Css 类？
【发布时间】：2013-10-07 03:35:38
【问题描述】：

我正在创建一个 Connect 4 游戏并创建了一个 td 元素表，其中每个 td 都有一个 row 和 col 值，即 (1,2)。这里：

for(var i = 0; i < rows; i++) {
    $('table').append('<tr></tr>');
    for(var j = 0; j < cols; j++) {
    $('table').find('tr').eq(i).append('<td></td>');
    $('table').find('tr').eq(i).find('td').eq(j).attr('data-row', i).attr('data-col', j);
}

我还有一个代码，可以在单击时为每个 td 分配一个 css 类（每次单击时颜色都会改变，因为它是 2 个玩家的颜色）。然后我想移动到右侧的 td（最后都是右、左、上和下），然后检查该 td 是否具有相似的颜色类，检查器需要转到 td 之后的 4 个向右查找是否有一系列相似颜色的 td（即连续 3 个红色 td 没有任何效果，但是 4 个可以）我想使用类似于我已经拥有的代码的东西，因为我通常可以理解它。在这里，ps我知道 IF 语句的顺序完全不正确，我使用的是 for 循环 (x = 1; x

var win = false;
if(win == false) {
    if($(this).hasClass('tdred')) {
        var colindex = parseInt($(this).attr('data-col')) + 1;
        var chosen = $('table tr').eq(colindex).find('td');
        // ^ Moves to next td right of
        //begin check if has class tdred
        if($(chosen).hasClass('tdred')) {
            x++;
            alert(data - col + "is red");
            var colindex = parseInt($(this).attr('data-col')) + 1;
            if(x = 4) {
                win == true;
            }
            if(x < 4)
        }
    } else {
        alert("not red");
    }
}
} else if(win == true)
    Alert("You win");
}

希望你喜欢 if 语句的可怕积累，我相信这是纯粹的挫败感。

【问题讨论】：

见jQuery .next()
if(x = 4) 中的等号应为==（或===）。但我不明白你遇到了什么麻烦。是用 jQuery 选择某些单元格吗？例如，您可以使用 td[data-row=1][data-col=2] 之类的选择器。
只是一个提示，你并不真的需要 data-row 和 data-col，你可以通过使用 DOM Elements tr/td 上的 rowIndex 和 cellIndex 直接访问行和列索引，或者如果你想用 jQuery 来做这件事，请使用 $('tr').index() 和 $('td').index()，尽管这样效率会降低。
我已经检查了 .next() 和 .parent() 等等，但似乎有所区别 - lightstyle。我喜欢你的想法@bfavaretto，但是是否可以从单击的 td 中获取数据行和数据列，然后转到 (data-row + 1) 以便它选择单击的右侧？我也会尝试你的方法 axel.michael。谢谢大家谢谢！

标签： javascript jquery for-loop html-table

【解决方案1】：

我认为您应该查看 Connect 4 游戏的这个示例：http://www.lazylab.org/152/java/connect-four-game-coding-puzzle-algorithm-in-java/ 虽然是java代码，但我想你可以把它翻译成javascript

【讨论】：