我正在尝试将我的tic-tac-toe游戏添加到我的主页但由于某种原因，jQuery没有做任何事情。这有什么问题？我假设所有这些都是我在html中链接的错误，但我不确定。对于冗长的代码感到抱歉，我想我也可以发布所有内容以防万一问题不在我认为的地方。 HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel='stylesheet' type='text/css' href='stylesheet.css' />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type='text/javascript' src='script.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
</head>
<body>
<div>
<h3>The Internet</h3>
</div>
<ul><a href="http://www.facebook.com/">Facebook</a>
</ul>
<ul><a href="http://www.4chan.org/g/">/g/</a>
</ul>
<ul><a href="http://www.4chan.org/wg/">/wg/</a>
</ul>
<ul><a href="http://www.google.com/voice/">Google Voice</a>
</ul>
<ul><a href="http://www.codecademy.com/tracks">Codecademy</a>
</ul>
<table>
<tr>
<button type='button'>New Game</button>
<td id='c1'></td>
<td id='c2'></td>
<td id='c3'></td>
</tr>
<tr>
<td id='c4'></td>
<td id='c5'></td>
<td id='c6'></td>
</tr>
<tr>
<td id='c7'></td>
<td id='c8'></td>
<td id='c9'></td>
</tr>
</table>
</body>
</html>
CSS
* {
background-color: white;
}
h3 {
font-size: 75px;
font-family: cursive;
color: #333333;
text-align: center;
}
a {
font-size: 40px;
color: #333333;
text-decoration: none;
font-family: cursive;
}
ul {
display: inline-block;
margin-left: 45px;
margin-top: 55px;
}
table, td {
border-collapse: collapse;
font-family: Cursive;
margin-top: -300px;
margin-left: 105px;
border: 1px solid black;
height: 35px;
width: 35px;
text-align: center;
background-color: #969696;
color: black;
overflow: hidden;
table-layout: fixed;
white-space: nowrap;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
}
button {
border: 1px solid black;
border-radius: 10px;
margin-left: -1124px;
margin-top: -50px;
position: absolute;
font-family: Cursive;
font-size: 16px;
background-color: #1d3da5;
}
button:hover {
background-color: #3F5DC2;
}
的JavaScript
$(document).ready(function () {
//Creates the variables needed to be manipulated later
var X = 'X';
var O = 'O';
var currentPlayer;
var turnCount = 0;
var xMoves = [];
var oMoves = [];
var cellTracker;
var winAlert;
var winConditions = [
['c1', 'c2', 'c3'],
['c4', 'c5', 'c6'],
['c7', 'c8', 'c9'],
['c1', 'c4', 'c7'],
['c2', 'c5', 'c8'],
['c3', 'c6', 'c9'],
['c1', 'c5', 'c9'],
['c3', 'c5', 'c7']
];
var button = $('button');
/*Set's the current player to X if turnCount is odd
And to O if turnCount is even*/
var setCurrentPlayer = function () {
if (turnCount % 2 === 0) {
currentPlayer = O;
} else {
currentPlayer = X;
}
};
//Pushes cellTracker's value to the curent player's move variable
var storeMoves = function () {
if (currentPlayer === X) {
xMoves.push(cellTracker);
} else if (currentPlayer === O) {
oMoves.push(cellTracker);
}
};
//Compares players moves with the winConditions to determine a winner
var determineWin = function (pMoves) {
for (var i = 0; i < winConditions.length; i++) {
if (winConditions[i].length > pMoves.length) {
continue;
}
for (var j = 0; j < winConditions[i].length; j++) {
winAlert = false;
for (var k = 0; k < pMoves.length; k++) {
if (pMoves[k] === winConditions[i][j]) {
winAlert = true;
}
}
if (!winAlert) break;
}
if (winAlert) {
alert(currentPlayer + " wins!");
break;
}
}
};
//Determines if the game is over
var determineEnd = function () {
if (turnCount === 9 && winAlert === false) {
alert("Tie game!");
}
if (winAlert === true) {
$('td').off('click.mygame', clickHandler);
}
};
//Calls the above functions to simulate the game
var clickHandler = function () {
turnCount += 1;
setCurrentPlayer();
$(this).text(currentPlayer);
cellTracker = $(this).attr('id');
storeMoves();
determineWin(currentPlayer == 'X' ? xMoves : oMoves);
determineEnd();
console.log(turnCount, xMoves, oMoves, winAlert);
};
//Calls the clickHandler function when a cell is clicked
$('td').one('click.mygame', clickHandler);
//Starts a new game when the New Game button is clicked
$('button').bind('click', function () {
$('td').empty();
turnCount = 0;
xMoves = [];
oMoves = [];
winAlert = false;
$('td').off('click');
$('td').one('click.mygame', clickHandler);
});
});
EDIT这是控制台在加载页面时记录的内容。
[13:00:52.689] Unknown property 'user-select'. Declaration dropped. @ file:///C:/Users/Tim/Documents/stylesheet.css:42
[13:00:52.690] ReferenceError: $ is not defined @ file:///C:/Users/Tim/Documents/script.js:1
[13:00:52.694] The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol. @ file:///C:/Users/Tim/Documents/home_page.html
答案 0 :(得分：2)
我没有看到您首先包含jquery文件。
您要包括jquery ui两次
并改变这个
<script src="//ajax.
到
<script src="http://ajax.
在本地工作时
这应该加载文件的顺序是
// First jQuery
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
// Second jQuery UI
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
// Then comes your script
<script type='text/javascript' src='script.js'></script>
答案 1 :(得分：1)
你必须包括Jquery ......
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
您可能只是将ui包含两次，而是用我上面的行替换第一行
所以你的标题代码就是......
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script type='text/javascript' src='script.js'></script>