2013-05-05 109 views
1

我無法在我的javascript中重置按鈕以重新玩遊戲。Tic Tac Toe遊戲JavaScript

這裏是對代碼的鏈接: http://jsfiddle.net/jbirdwell/Q3wEZ/

HTML:

<h1>Tic Tac Toe</h1> 

<div></div> 
<div></div> 
<div></div> 
<br> 
<div></div> 
<div></div> 
<div></div> 
<br> 
<div></div> 
<div></div> 
<div></div> 
<br> 
<button>New Game</button> 

的JavaScript:

var x = false; 

$(document).ready(function() { 
    $('div').click(function() { 
     if (!x) { 
      $(this).toggleClass('user1'); 
      x = true; 
     } else { 
      $(this).toggleClass('user2'); 
      x = false; 
     } 
    }); 

    $('button').click(function() { 
     $('div').toggleClass('newgame'); 
    });  
}); 

一旦執行按鈕點擊事件,我不能再回到開頭再玩一次。

+1

看來你對CSS的一些誤解。 '$('div')。toggleClass('newgame')'不會做你認爲它做的事情。 – 2013-05-05 12:19:21

+0

是的,我做到了。我現在已經學會了。我昨天開始學習Html和Javascript。 – 2013-05-05 12:30:58

回答

2

你可能想要更多的東西一樣......

$('button').click(function() { 
    $('div').removeClass("user1 user2"); 
}); 
+0

This Works!謝謝你,亞歷克斯!我正在學習,這是我對過去幾個小時的探索。 – 2013-05-05 12:18:40

+0

@Jeverwell如果你關心第二款遊戲中玩家的差異,別忘了重置你的'x'變量。 – 2013-05-05 12:21:03

+0

太棒了。我將x重置爲false。它現在有用,謝謝。我一直在爲這個問題奮鬥了一個小時。 – 2013-05-05 12:24:12

2

這是因爲他們仍然有其他類,嘗試將其更改爲:

$('button').click(function() { 
    $('div').toggleClass('newgame'); 
    $('div').removeClass('user1 user2'); 
    x = false; 
}); 

應工作

+1

'newgame'類不再需要。 – JJJ 2013-05-05 12:18:43

+0

的確如此,但是也許他出於其他原因需要它。這足以讓你自己工作:) – 2013-05-05 12:19:35

0

雖然你改變字段的顏色,他們仍然有「user1」和「user2」類。所以你必須做的是重置這些。

我已經改變了你的代碼,使其工作,here

$('button').click(function() { 
    $("div").removeClass("user1"); 
    $("div").removeClass("user2"); 
});