Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/86.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript tictac-toe-in jquery我能把代码缩短一点吗_Javascript_Jquery - Fatal编程技术网

Javascript tictac-toe-in jquery我能把代码缩短一点吗

Javascript tictac-toe-in jquery我能把代码缩短一点吗,javascript,jquery,Javascript,Jquery,我想知道是否有可能在函数检查是否有人赢了游戏的部分中缩短代码 我尝试过使用casebreak,但我不知道如何在这个例子中使用它 <script> $(document).ready(function(){ if ($("#item1").hasClass(".winnerX") && $("#item2").hasClass(".winnerX") && $("#item3").h

我想知道是否有可能在函数检查是否有人赢了游戏的部分中缩短代码

我尝试过使用casebreak,但我不知道如何在这个例子中使用它

<script>
                  $(document).ready(function(){
                  if ($("#item1").hasClass(".winnerX") && $("#item2").hasClass(".winnerX") && $("#item3").hasClass(".winnerX")) {
                    $(".win").text("Player X won");
        } else if ($("#item4").hasClass(".winnerX") && $("#item5").hasClass(".winnerX") && $("#item6").hasClass(".winnerX")) {
          $(".win").text("Player X won");
        } else if ($("#item7").hasClass(".winnerX") && $("#item8").hasClass(".winnerX") && $("#item9").hasClass(".winnerX")) {
          $(".win").text("Player X won");
        } else if ($("#item1").hasClass(".winnerX") && $("#item4").hasClass(".winnerX") && $("#item7").hasClass(".winnerX")) {
          $(".win").text("Player X won");
        } else if ($("#item2").hasClass(".winnerX") && $("#item5").hasClass(".winnerX") && $("#item8").hasClass(".winnerX")) {
          $(".win").text("Player X won");
        } else if ($("#item3").hasClass(".winnerX") && $("#item6").hasClass(".winnerX") && $("#item9").hasClass(".winnerX")) {
          $(".win").text("Player X won");
        } else if ($("#item3").hasClass(".winnerX") && $("#item5").hasClass(".winnerX") && $("#item7").hasClass(".winnerX")) {
          $(".win").text("Player X won");
        } else if ($("#item1").hasClass(".winnerX") && $("#item5").hasClass(".winnerX") && $("#item9").hasClass(".winnerX")) {
          $(".win").text("Player X won");
        } else if ($("#item3").hasClass(".winnerX") && $("#item5").hasClass(".winnerX") && $("#item7").hasClass(".winnerX")) {
          $(".win").text("Player X won");
        } else {
          return false;
        }
    });
    $(document).ready(function(){
        if ($("#item1").hasClass(".winnerO") && $("#item2").hasClass(".winnerO") && $("#item3").hasClass(".winnerO")) {
          $(".win").text("Player O won");
        } else if ($("#item4").hasClass(".winnerO") && $("#item5").hasClass(".winnerO") && $("#item6").hasClass(".winnerO")) {
          $(".win").text("Player O won");
        } else if ($("#item7").hasClass(".winnerO") && $("#item8").hasClass(".winnerO") && $("#item9").hasClass(".winnerO")) {
          $(".win").text("Player O won");
        } else if ($("#item1").hasClass(".winnerO") && $("#item4").hasClass(".winnerO") && $("#item7").hasClass(".winnerO")) {
          $(".win").text("Player O won");
        } else if ($("#item2").hasClass(".winnerO") && $("#item5").hasClass(".winnerO") && $("#item8").hasClass(".winnerO")) {
          $(".win").text("Player O won");
        } else if ($("#item3").hasClass(".winnerO") && $("#item6").hasClass(".winnerO") && $("#item9").hasClass(".winnerO")) {
          $(".win").text("Player O won");
        } else if ($("#item3").hasClass(".winnerO") && $("#item5").hasClass(".winnerO") && $("#item7").hasClass(".winnerO")) {
          $(".win").text("Player O won");
        } else if ($("#item1").hasClass(".winnerO") && $("#item5").hasClass(".winnerO") && $("#item9").hasClass(".winnerO")) {
          $(".win").text("Player O won");
        } else if ($("#item3").hasClass(".winnerO") && $("#item5").hasClass(".winnerO") && $("#item7").hasClass(".winnerO")) {
          $(".win").text("Player O won");
        } else {
            return false;
        }
    });
            });
</script>

$(文档).ready(函数(){
if($(“#item1”).hasClass(“.winnerX”)&&($(“#item2”).hasClass(“.winnerX”)&&($(“#item3”).hasClass(.winnerX”)){
$(“.win”).text(“玩家X赢”);
}如果($(“#item4”).hasClass(“.winnerX”)&&($(“#item5”).hasClass(.winnerX”)&&($(“#item6”).hasClass(.winnerX”)){
$(“.win”).text(“玩家X赢”);
}如果($(“#item7”).hasClass(“.winnerX”)&&($(“#item8”).hasClass(“.winnerX”)&&($(“#item9”).hasClass(.winnerX”)){
$(“.win”).text(“玩家X赢”);
}如果($(“#item1”).hasClass(“.winnerX”)&&($(“#item4”).hasClass(.winnerX”)&&($(“#item7”).hasClass(.winnerX”)){
$(“.win”).text(“玩家X赢”);
}否则如果($(“#item2”).hasClass(“.winnerX”)和&$(“#item5”).hasClass(“.winnerX”)和&$(“#item8”).hasClass(.winnerX”)){
$(“.win”).text(“玩家X赢”);
}如果($(“#item3”).hasClass(“.winnerX”)和&$(“#item6”).hasClass(“.winnerX”)和&$(“#item9”).hasClass(.winnerX”)){
$(“.win”).text(“玩家X赢”);
}否则如果($(“#item3”).hasClass(“.winnerX”)和&$(“#item5”).hasClass(“.winnerX”)和&$(“#item7”).hasClass(.winnerX”)){
$(“.win”).text(“玩家X赢”);
}否则如果($(“#item1”).hasClass(“.winnerX”)和&$(“#item5”).hasClass(“.winnerX”)和&$(“#item9”).hasClass(.winnerX”)){
$(“.win”).text(“玩家X赢”);
}否则如果($(“#item3”).hasClass(“.winnerX”)和&$(“#item5”).hasClass(“.winnerX”)和&$(“#item7”).hasClass(.winnerX”)){
$(“.win”).text(“玩家X赢”);
}否则{
返回false;
}
});
$(文档).ready(函数(){
if($(“#item1”).hasClass(“.winnerO”)&&($(“#item2”).hasClass(“.winnerO”)&&($(“#item3”).hasClass(“.winnerO”)){
$(“.win”).text(“玩家O赢”);
}否则如果($(“#item4”).hasClass(“.winnerO”)&&($(“#item5”).hasClass(.winnerO”)&&$(“#item6”).hasClass(.winnerO”)){
$(“.win”).text(“玩家O赢”);
}如果($(“.winnerO”)&&($(“.winnerO”).hasClass(.winnerO”)&&($(“.winnerO”).hasClass(.winnerO”)&&($(“item9”).hasClass(.winnerO”)){
$(“.win”).text(“玩家O赢”);
}否则如果($(“#item1”).hasClass(“.winnerO”)&&($(“#item4”).hasClass(.winnerO”)&&$(“#item7”).hasClass(.winnerO”)){
$(“.win”).text(“玩家O赢”);
}否则如果($(“#item2”).hasClass(“.winnerO”)&&($(“#item5”).hasClass(.winnerO”)&&$(“#item8”).hasClass(.winnerO”)){
$(“.win”).text(“玩家O赢”);
}否则,如果($(“#item3”).hasClass(“.winnerO”)&&($(“#item6”).hasClass(.winnerO”)&&($(“.winnerO”).hasClass(.winnerO”)&&($(“item9”).hasClass(.winnerO”)){
$(“.win”).text(“玩家O赢”);
}否则如果($(“#item3”).hasClass(“.winnerO”)&&($(“#item5”).hasClass(.winnerO”)&&$(“#item7”).hasClass(.winnerO”)){
$(“.win”).text(“玩家O赢”);
}否则如果($(“#item1”).hasClass(“.winnerO”)&&$(“#item5”).hasClass(.winnerO”)&&$(“#item9”).hasClass(.winnerO”)){
$(“.win”).text(“玩家O赢”);
}否则如果($(“#item3”).hasClass(“.winnerO”)&&($(“#item5”).hasClass(.winnerO”)&&$(“#item7”).hasClass(.winnerO”)){
$(“.win”).text(“玩家O赢”);
}否则{
返回false;
}
});
});
除此之外,一切正常
链接到完整的github

您可以使用这种方法

winnerCombs=[
[1,2,3],
[4,5,6],
[7,8,9],
[1,4,7],
[2,5,8],
[3,6,9],
[3,5,7],
[1,5,9]
]
const checkWinner=玩家=>{
返回winnerCombs.some(comb=>comb.every(c=>$(“#项”+c).hasClass(玩家)))
}
isWinnerX=checkWinner(“.winnerX”)//如果winner是玩家X,则返回true

isWinnerY=checkWinner(“.winnerY”)//如果winner是玩家Y,则返回true
检查3,5和7两次。是的,你是对的,我以前没有看到,但我希望更简短,如果你的代码有效,那么你可能想尝试做一些更改。首先,有一个函数,在X赢时返回真/假,然后只有“玩家X赢”代码一次。这可以扩展到返回谁赢得了X/O/还没有人。我还将所有
$(#)hasClass
调用转换为一个数组,这样它们只被调用一次。然后你可以组合一些子句,例如if(#1&&(#2&&&(#3)|(#5&& )|(#4&&))。