Question

我正在尝试创建一个tictactoe游戏。玩家1选择他的标记x或o，然后出现tictactoe板。玩家1的标记，让我们说x，只要他悬停在空单元格上，就会出现0.5不透明度。单击时，单元格将接收.addClass（＆＃34;单击＆＃34;），该标记将标记插入到1个不透明度的单元格中。我有一个.toggleClass函数来切换玩家标记。我希望玩家1的x留在棋盘上，而玩家2的徘徊在任何空单元格上显示o。我遇到的问题是，在我单击一个单元格以添加我的x后，整个棋盘会切换到类。我希望每个没有上课的单元格＃34;点击＆＃34;切换。我怎么能这样做？

如果玩家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

将函数添加到每个单独的单元格而不是单板，并在函数内检查单元格是否具有$(function(){ $(".board td").addClass("o"); $("td").click(function(){ if( $(this).hasClass('clicked') ) { $(this).children("p").addClass("clicked x"); $(this).toggleClass("x o"); } }); });类。

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

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

{{1}}

单击元素后禁用.toggleClass

1 个答案: