无法让jQuery工作，请告诉我我做错了什么
问题描述：
我应该为我的Javascript类创建一个游戏，并且我正尝试使用jQuery创建一个检查器游戏。我刚开始添加jQuery，到目前为止没有任何工作。这非常令人沮丧。 无法让jQuery工作，请告诉我我做错了什么
$(document).ready(function() {
$("#red1").hide();
});#checkerBoard {
border: 2px solid black;
width: 1000px;
}
.red {
background-color: red;
width: 100px;
height: 100px;
margin: 0;
}
.black {
background-color: #000;
width: 100px;
height: 100px;
margin: 0;
}
td {
width: 2em;
height: em;
text-align: center;
}
img {
width: 6em;
height: 6em;
text-align: center;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>How to Play Checkers</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
</head>
<body>
<div id="wrapper">
<header>
<h1>How to Play Checkers</h1>
<nav>
<ul>
<li>Home</li>
<!--add more-->
</ul>
</nav>
</header>
<section>
<p></p>
<table id="checkerBoard">
<thead><!--insert something--></thead>
<tbody>
<tr id="row1">
<td class="red"><img src="images/blackCheckerPiece.png" alt="red checker piece" /></td>
<td class="black"><img src="images/blackCheckerPiece.png" alt="red checker piece" /></td>
<td class="red"><img src="images/blackCheckerPiece.png" alt="red checker piece" /></td>
<td class="black"><img src="images/blackCheckerPiece.png" alt="red checker piece" /></td>
<td class="red"><img src="images/blackCheckerPiece.png" alt="red checker piece" /></td>
<td class="black"><img src="images/blackCheckerPiece.png" alt="red checker piece" /></td>
<td class="red"><img src="images/blackCheckerPiece.png" alt="red checker piece" /></td>
<td class="black"><img src="images/blackCheckerPiece.png" alt="red checker piece" /></td>
</tr>
<tr id="row2">
<td class="black"><img src="images/blackCheckerPiece.png" alt="red checker piece" /></td>
<td class="red"><img src="images/blackCheckerPiece.png" alt="red checker piece" /></td>
<td class="black"><img src="images/blackCheckerPiece.png" alt="red checker piece" /></td>
<td class="red"><img src="images/blackCheckerPiece.png" alt="red checker piece" /></td>
<td class="black"><img src="images/blackCheckerPiece.png" alt="red checker piece" /></td>
<td class="red"><img src="images/blackCheckerPiece.png" alt="red checker piece" /></td>
<td class="black"><img src="images/blackCheckerPiece.png" alt="red checker piece" /></td>
<td class="red"><img src="images/blackCheckerPiece.png" alt="red checker piece" /></td>
</tr>
<tr id="row3">
<td class="red"></td>
<td class="black"></td>
<td class="red"></td>
<td class="black"></td>
<td class="red"></td>
<td class="black"></td>
<td class="red"></td>
<td class="black"></td>
</tr>
<tr id="row4">
<td class="black"></td>
<td class="red"></td>
<td class="black"></td>
<td class="red"></td>
<td class="black"></td>
<td class="red"></td>
<td class="black"></td>
<td class="red"></td>
</tr>
<tr id="row5">
<td class="red"></td>
<td class="black"></td>
<td class="red"></td>
<td class="black"></td>
<td class="red"></td>
<td class="black"></td>
<td class="red"></td>
<td class="black"></td>
</tr>
<tr id="row6">
<td class="black"></td>
<td class="red"></td>
<td class="black"></td>
<td class="red"></td>
<td class="black"></td>
<td class="red"></td>
<td class="black"></td>
<td class="red"></td>
</tr>
<tr id="row7">
<td class="red"><img id="red1" src="images/redCheckerPiece.png" alt="red checker piece" /></td>
<td class="black"><img src="images/redCheckerPiece.png" alt="red checker piece" /></td>
<td class="red"><img src="images/redCheckerPiece.png" alt="red checker piece" /></td>
<td class="black"><img src="images/redCheckerPiece.png" alt="red checker piece" /></td>
<td class="red"><img src="images/redCheckerPiece.png" alt="red checker piece" /></td>
<td class="black"><img src="images/redCheckerPiece.png" alt="red checker piece" /></td>
<td class="red"><img src="images/redCheckerPiece.png" alt="red checker piece" /></td>
<td class="black"><img src="images/redCheckerPiece.png" alt="red checker piece" /></td>
</tr>
<tr id="row8">
<td class="black"><img src="images/redCheckerPiece.png" alt="red checker piece" /></td>
<td class="red"><img src="images/redCheckerPiece.png" alt="red checker piece" /></td>
<td class="black"><img src="images/redCheckerPiece.png" alt="red checker piece" /></td>
<td class="red"><img src="images/redCheckerPiece.png" alt="red checker piece" /></td>
<td class="black"><img src="images/redCheckerPiece.png" alt="red checker piece" /></td>
<td class="red"><img src="images/redCheckerPiece.png" alt="red checker piece" /></td>
<td class="black"><img src="images/redCheckerPiece.png" alt="red checker piece" /></td>
<td class="red"><img src="images/redCheckerPiece.png" alt="red checker piece" /></td>
</tr>
</tbody>
</table>
</section>
</div>
<script src="jquery-3.1.1.js" type="text/javascript"></script>
<script src="script.js" type="text/css"></script><!--Move later?-->
</body>
</html>
答
确保您的jQuery的路径是正确的。 JS类型必须是“text/javascript”。如果你删除了type属性，它也会起作用。 HTML5支持它。
+0
这是一条评论或一个答案？ –
+0
没有足够的知名度发表评论 –
+2
没有理由......贡献一点点，如果我的记忆力不错，只需要15分就可以发表评论 –
答
https://jsfiddle.net/omutzak7/3/
确保您的链接的脚本是正确的类型。
<script src="script.js" type="text/javascript"></script>
正如你可以在jsfiddle链接中看到的图像被正确隐藏。
'script.js'包含的类型不应该是'text/javascript“，并确保jquery通过chrome的网络标签加载 – kumkanillam
'script.js'包含的类型**应该**（！）是'text/javascript ''而不是'text/css'。 –
我不敢相信我没有注意到这一点，非常感谢，完全修正了它！ – Taylor