無法讓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>

來源

2016-10-05 Taylor

'script.js'包含的類型不應該是'text/javascript「，並確保jquery通過chrome的網絡標籤加載 – kumkanillam

'script.js'包含的類型**應該**（！）是'text/javascript ''而不是'text/css'。 –

我不敢相信我沒有注意到這一點，非常感謝，完全修正了它！ – Taylor

確保您的jQuery的路徑是正確的。 JS類型必須是「text/javascript」。如果你刪除了type屬性，它也會起作用。 HTML5支持它。

來源

2016-10-05 01:32:44

這是一條評論或一個答案？ –

沒有足夠的知名度發表評論 –

沒有理由......貢獻一點點，如果我的記憶力不錯，只需要15分就可以發表評論 –

https://jsfiddle.net/omutzak7/3/

確保您的鏈接的腳本是正確的類型。

<script src="script.js" type="text/javascript"></script>

正如你可以在jsfiddle鏈接中看到的圖像被正確隱藏。

來源

2016-10-05 01:41:51

無法讓jQuery工作，請告訴我我做錯了什麼

回答

相關問題