javascript - 单击元素后禁用 .toggleClass

Question

我正在尝试创建一个井字游戏。玩家 1 选择他的标记 x 或 o，然后出现井字板。玩家 1 的标记，比方说 x，每当他悬停在一个空单元格上时都会以 0.5 的不透明度出现。单击时，单元格会收到一个 .addClass("clicked")，它将标记以 1 的不透明度插入到单元格中。我有一个 .toggleClass 函数可以在玩家标记之间切换。我希望玩家 1 的 x 留在棋盘上，而玩家 2 的悬停在任何空单元格上显示 o。我遇到的问题是，在我单击一个单元格以添加我的 x 后，整个板切换类。我希望每个没有“单击”类的单元格进行切换。我该怎么做？

这是玩家 1 选择 x 时的代码

case "x":
    $(function(){
        $(".board").addClass("o");
        $("td").click(function(){
            $(this).children("p").addClass("clicked x");
            $(".board").toggleClass("x o");
        });
    });
    break;

CSS

.x td:hover p {
    content:url("images/X.png");
    opacity:0.5;
    cursor:pointer;
}

.o td:hover p {
    content:url("images/O.png");
    opacity:0.5;
    cursor:pointer;
}

.x .clicked {
    content:url("images/X.png");
    opacity:1;
}

.o .clicked {
    content:url("images/O.png");
    opacity:1;
}

HTML

        <table class="hidden board" cellspacing="0">
            <p class="bigTitle hidden" id="turn">Player Turn</p>
            <tbody>
            <tr>
                <td id="a1"><p></p></td>
                <td id="a2"><p></p></td>
                <td id="a3"><p></p></td>
            </tr>
            <tr>
                <td id="b1"><p></p></td>
                <td id="b2"><p></p></td>
                <td id="b3"><p></p></td>    
            </tr>
            <tr>
                <td id="c1"><p></p></td>
                <td id="c2"><p></p></td>
                <td id="c3"><p></p></td>    
            </tr>
            </tbody>
        </table>

Answer 1

将函数添加到每个单独的单元格而不是面板，并在函数内检查单元格是否具有 clicked 类。

$(function(){
    $(".board td").addClass("o");
    $("td").click(function(){
        if( $(this).hasClass('clicked') ) {
            $(this).children("p").addClass("clicked x");
            $(this).toggleClass("x o");
        }
    });
});

相应地修改 CSS 选择器，例如

td.o:hover p { ...
.x.clicked { ...