jQuery 区分 click() 和 dblclick()

Question

我正在使用 jQuery 为两个玩家制作一个简单的井字游戏。我想在用户单击时插入“X”，在双击时插入“O”。这是我用的

 $(document).ready(function(){
        $(".tic").click(function(){
            $(this).append("X");
        });
        $(".tic").dblclick(function(){
            $(this).append("O");
        });
    });

当用户双击“X”然后显示“O”时。

Answer 1

我想我理解你的问题。您的代码按预期工作，即在第一次点击时附加 X，然后在第二次点击时附加 O，但没有清除......所以你最终得到 XO。

如果您更正代码以替换单击的.tac 的文本，那么它将覆盖以前的值。这是JSfiddle。

$(document).ready(function(){
    $(".tic").click(function(){
        $(this).text("X");
    });
    $(".tic").dblclick(function(){
        $(this).text("O");
    });
}); 

---

或者只检查文本的值并在空白、X、O 之间循环。这对于玩家来说可能是更好的体验，同时保留了双击分配“O”的功能。

$(document).ready(function(){
    $(".tic").click(function(){
        if ($(this).text() == "" ) {
           $(this).text("X");
        } else if ( $(this).text() == "X" ) {
           $(this).text("O");
        } else {
           $(this).text("");
        }
    });
}); 

如果这不是您的问题，请告诉我。