1. 首頁
  2. 問答
  3. 如何遍歷一些元素，檢查它們是否在jQuery中保持某些條件？

如何遍歷一些元素，檢查它們是否在jQuery中保持某些條件？

2017-01-10 37 views
0

我正在建設一個小型學校項目。這是一種幸運類遊戲。我有一個字母顯示，每個字母是可點擊的。當玩家點擊一個字母時，它恰好是一個正確的猜測 - 字母顯示在單詞桌上。如果積分變爲0，玩家就會失去信心，我試圖在用戶打開所有字母並且獲得超過0分的情況下這樣做。所以，我想循環通過一個單詞表上的所有框，並檢查它們的所有兩個條件：1.如果字母應該在那裏，它是，2.如果字母顯示（我不使用顯示無爲了隱藏它，我將它變成了一個變量，並通過一系列不同長度的單詞進行循環，這就是爲什麼我需要檢查這封信是否在那裏以及它是否應該在那裏）。如何遍歷一些元素，檢查它們是否在jQuery中保持某些條件？

此時遊戲在第一次正確猜測後停止。

$(document).ready(function(){ 
 
\t var counter = 0; 
 
\t var points = 3000; 
 
    var gameinplay = false; 
 
\t //array of words and hints 
 
    var words = [{word: "lambent", hint: "softly bright or radiant, 7 letters"}, 
 
    \t {word: "facetious", hint: "meant to be humorous or funny : not serious"}, 
 
    \t {word: "obfuscate", hint: "to be evasive, unclear, or confusing"}]; 
 
\t //does a number of things when click start button 
 
\t $('#start').click(function(){ 
 
\t \t gameinplay = true; 
 
\t \t //moves the wheel 
 
     $('#wheel').addClass('rotate').delay(15000).queue(function(next){ 
 
      $('#wheel').removeClass('rotate'); 
 
      next(); 
 
     });  
 
     //shows hint when click start button 
 
\t \t $('#hint').text(words[counter].hint).show(); 
 

 
\t \t //shows points in the beginning 
 
\t \t $('#points').text(points + " points").show(); 
 

 
\t \t //shows alphabet 
 
\t \t $('.letter').show(); 
 

 
\t \t //changes start button to reset game 
 
\t \t $('#start').text("RESTART GAME").show(); 
 

 
\t \t //loops through an array of words and hints each time start button clicked 
 
\t \t for (var i = 0; i < words[counter].word.length; i++) { 
 
    \t \t $('.wordLetter').eq(i).attr('data-letter', words[counter].word.charAt(i));//assigns a letter value to each box 
 
\t \t } 
 

 
\t \t //resets the game to the next word 
 
\t \t counter = counter + 1; 
 
    }); 
 

 
    //Make each letter an element - done! 
 
\t //Make each letter clickable 
 
    $('.letter').click(function(){ 
 
    \t if (gameinplay) { 
 
      var letter = $(this); 
 
      var letterPresence = false; 
 
      
 
      //Checks if this letter is in word 
 
      $('.wordLetter').each(function(){  
 
       if ($(this).attr('data-letter').toUpperCase() == letter.text()){ //checks if the letter pushed is the same letter in word 
 
        $(this).text($(this).attr('data-letter')); //shows letter in word table 
 
        letterPresence = true; //sets letterPresence equal to true 
 
       } 
 
      }); 
 
      if (letterPresence == true) { 
 
       points += 1000; // adds points by a 1000 if letter was guessed wright 
 
       $('#points').text(points + " points"); 
 
       $('.instructions').text("Right guess!").show(); //gives instructions 
 
      } else { 
 
       points -= 1000; // subtracts points by a 1000 if letter was not guessed wright 
 
       $('#points').text(points + " points"); //shows total points 
 
       $('.instructions').text("This letter is not in the word.").show(); //gives instructions 
 
       if (points == 0){ //if points equal 0 game is over 
 
        $('#gameover').show(); //cancels display:none 
 
        gameinplay = false; //makes letters non clickable 
 
       } //end if statement 
 
      }//end each loop 
 
//This is where I need some help to figure out how to loop through all letters in a word 
 
      $('.wordLetter').each(function(){ 
 
       //check if all letters are shown 
 
       if($(this).attr('data-letter') != " " && $(this).is(":visible")){ 
 
        $('#wongame').show(); 
 
        gameinplay = false; 
 
       } 
 
      }); 
 
     } //end if game in play   
 
    }); 
 
});
#gameover, #wongame { 
 
\t display: none; 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <meta charset="UTF-8"> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
\t <script src="wheel.js"></script> 
 
\t <title>Wheel of Fortune</title> 
 
\t <link rel="stylesheet" type="text/css" href="wheel.css"> 
 
\t <link rel="stylesheet" type="text/css"href="bootstrap.css"></link> 
 
</head> 
 
<body> 
 
\t <div> 
 
\t \t <div class="row"> 
 
\t \t \t <div class="col-md-4"> 
 
\t \t \t \t <div class="centertoprow"> 
 
\t \t \t \t \t <button id="start" class="button button1">START</button></div> 
 
\t \t \t \t </div> 
 
\t \t \t <div class="col-md-4"> 
 
\t \t \t \t <div class="centertoprow"> 
 
\t \t \t \t \t <img id="logo" src="logo.jpg"> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="col-md-4"> 
 
\t \t \t \t <div class="centertoprow"> 
 
\t \t \t \t \t <h3 id="hint"></h3> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <div class="row"> 
 
\t \t \t <div class="col-md-4"> 
 
\t \t \t \t <div > 
 
\t \t \t \t \t <img id="wheel" src="wheel_of_fortune.jpg" alt="wheel_of_fortune"> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="col-md-4"> 
 
\t \t \t \t <div class="centerbottomrow"> 
 
\t \t \t \t \t <h3 id="points"></h3> 
 
\t \t \t \t \t <h2 id="comment"></h2> 
 
\t \t \t \t \t <span class="letter">A</span> 
 
\t \t \t \t \t <span class="letter">B</span> 
 
\t \t \t \t \t <span class="letter">C</span> 
 
\t \t \t \t \t <span class="letter">D</span> 
 
\t \t \t \t \t <span class="letter">E</span> 
 
\t \t \t \t \t <span class="letter">F</span> 
 
\t \t \t \t \t <span class="letter">G</span> 
 
\t \t \t \t \t <span class="letter">H</span> 
 
\t \t \t \t \t <span class="letter">I</span> 
 
\t \t \t \t \t <span class="letter">J</span> 
 
\t \t \t \t \t <span class="letter">K</span> 
 
\t \t \t \t \t <span class="letter">L</span> 
 
\t \t \t \t \t <span class="letter">M</span> 
 
\t \t \t \t \t <span class="letter">N</span> 
 
\t \t \t \t \t <span class="letter">O</span> 
 
\t \t \t \t \t <span class="letter">P</span> 
 
\t \t \t \t \t <span class="letter">Q</span> 
 
\t \t \t \t \t <span class="letter">R</span> 
 
\t \t \t \t \t <span class="letter">S</span> 
 
\t \t \t \t \t <span class="letter">T</span> 
 
\t \t \t \t \t <span class="letter">U</span> 
 
\t \t \t \t \t <span class="letter">V</span> 
 
\t \t \t \t \t <span class="letter">W</span> 
 
\t \t \t \t \t <span class="letter">X</span> 
 
\t \t \t \t \t <span class="letter">Y</span> 
 
\t \t \t \t \t <span class="letter">Z</span> 
 
\t \t \t \t \t <h2 class="instructions"></h2> 
 
\t \t \t \t \t <h2 id="gameover"> 
 
\t \t \t \t \t \t GAME OVER <br> Click restart button to begin a new game 
 
\t \t \t \t \t </h2> 
 
\t \t \t \t \t <h2 id="wongame"> CONGRATULATION!<br> YOU WON!!!</h2> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="col-md-4"> 
 
\t \t \t \t <div class="centerbottomrow"> 
 
\t \t \t \t \t <table> 
 
\t \t \t \t \t  <tr> 
 
\t \t \t \t \t   <td data-letter="" class="wordLetter"></td> 
 
\t \t \t \t \t   <td data-letter="" class="wordLetter"></td> 
 
\t \t \t \t \t   <td data-letter="" class="wordLetter"></td> 
 
\t \t \t \t \t   <td data-letter="" class="wordLetter"></td> 
 
\t \t \t \t \t   <td data-letter="" class="wordLetter"></td> 
 
\t \t \t \t \t   <td data-letter="" class="wordLetter"></td> 
 
\t \t \t \t \t   <td data-letter="" class="wordLetter"></td> 
 
\t \t \t \t \t   <td data-letter="" class="wordLetter"></td> 
 
\t \t \t \t \t   <td data-letter="" class="wordLetter"></td> 
 
\t \t \t \t \t  </tr> 
 
\t \t \t \t \t </table> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</body> 
 
</html>

來源

2017-01-10 Irina

+0

' 「未捕獲的SyntaxError：意外的標記**」'。你在JavaScript中有94行的'**'。 –

+0

它運行代碼片段時顯示錯誤 –

回答

0

我做了兩件事情。首先，我創建了單詞行，並動態添加了<td>，這應允許使用不同長度的單詞。然後檢查是否已找到整個單詞的最簡單方法是檢查該行的text()函數。希望這可以幫助。

$(document).ready(function(){ 
 
\t var counter = 0; 
 
\t var points = 3000; 
 
    var gameinplay = false; 
 
\t //array of words and hints 
 
    var words = [{word: "lambent", hint: "softly bright or radiant, 7 letters"}, 
 
    \t {word: "facetious", hint: "meant to be humorous or funny : not serious"}, 
 
    \t {word: "obfuscate", hint: "to be evasive, unclear, or confusing"}]; 
 
\t //does a number of things when click start button 
 
\t $('#start').click(function(){ 
 
\t \t gameinplay = true; 
 
\t \t //moves the wheel 
 
     $('#wheel').addClass('rotate').delay(15000).queue(function(next){ 
 
      $('#wheel').removeClass('rotate'); 
 
      next(); 
 
     });  
 
     //shows hint when click start button 
 
\t \t $('#hint').text(words[counter].hint).show(); 
 

 
\t \t //shows points in the beginning 
 
\t \t $('#points').text(points + " points").show(); 
 

 
\t \t //shows alphabet 
 
\t \t $('.letter').show(); 
 

 
\t \t //changes start button to reset game 
 
\t \t $('#start').text("RESTART GAME").show(); 
 

 
\t \t //Create the list of <td> for each word 
 
\t \t for (var i = 0; i < words[counter].word.length; i++) { 
 
         $('<td>') 
 
          .data('letter', words[counter].word[i]) 
 
          .text('_') 
 
          .appendTo('.word-row'); 
 
\t \t } 
 

 
\t \t //resets the game to the next word 
 
\t \t counter = counter + 1; 
 
    }); 
 

 
    //Make each letter an element - done! 
 
\t //Make each letter clickable 
 
    $('.letter').click(function(){ 
 
    \t if (gameinplay) { 
 
      var letter = $(this); 
 
      var letterPresence = false; 
 
      
 
      //Checks if this letter is in word 
 
      $('.word-row>td').each(function(){  
 
       if ($(this).data('letter').toUpperCase() == letter.text()){ //checks if the letter pushed is the same letter in word 
 
        $(this).text($(this).data('letter')); //shows letter in word table 
 
        letterPresence = true; //sets letterPresence equal to true 
 
       } 
 
      }); 
 
      if (letterPresence == true) { 
 
       points += 1000; // adds points by a 1000 if letter was guessed wright 
 
       $('#points').text(points + " points"); 
 
       $('.instructions').text("Right guess!").show(); //gives instructions 
 
      } else { 
 
       points -= 1000; // subtracts points by a 1000 if letter was not guessed wright 
 
       $('#points').text(points + " points"); //shows total points 
 
       $('.instructions').text("This letter is not in the word.").show(); //gives instructions 
 
       if (points == 0){ //if points equal 0 game is over 
 
        $('#gameover').show(); //cancels display:none 
 
        gameinplay = false; //makes letters non clickable 
 
       } //end if statement 
 
      }//end each loop 
 

 
//This is where I need some help to figure out how to loop through all letters in a word 
 
    
 
      if ($('.word-row').text() === words[counter].word) { 
 
       $('#wongame').show(); 
 
       gameinplay = false; 
 
      }    
 
     } //end if game in play   
 
    }); 
 
});
#gameover, #wongame { 
 
\t display: none; 
 
} 
 
.word-row>td { 
 
    padding-right: 2px; 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <meta charset="UTF-8"> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
\t <script src="wheel.js"></script> 
 
\t <title>Wheel of Fortune</title> 
 
\t <link rel="stylesheet" type="text/css" href="wheel.css"> 
 
\t <link rel="stylesheet" type="text/css"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></link> 
 
</head> 
 
<body> 
 
\t <div> 
 
\t \t <div class="row"> 
 
\t \t \t <div class="col-md-4"> 
 
\t \t \t \t <div class="centertoprow"> 
 
\t \t \t \t \t <button id="start" class="button button1">START</button></div> 
 
\t \t \t \t </div> 
 
\t \t \t <div class="col-md-4"> 
 
\t \t \t \t <div class="centertoprow"> 
 
\t \t \t \t \t <img id="logo" src="logo.jpg"> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="col-md-4"> 
 
\t \t \t \t <div class="centertoprow"> 
 
\t \t \t \t \t <h3 id="hint"></h3> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <div class="row"> 
 
\t \t \t <div class="col-md-4"> 
 
\t \t \t \t <div > 
 
\t \t \t \t \t <img id="wheel" src="wheel_of_fortune.jpg" alt="wheel_of_fortune"> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="col-md-4"> 
 
\t \t \t \t <div class="centerbottomrow"> 
 
\t \t \t \t \t <h3 id="points"></h3> 
 
\t \t \t \t \t <h2 id="comment"></h2> 
 
\t \t \t \t \t <span class="letter">A</span> 
 
\t \t \t \t \t <span class="letter">B</span> 
 
\t \t \t \t \t <span class="letter">C</span> 
 
\t \t \t \t \t <span class="letter">D</span> 
 
\t \t \t \t \t <span class="letter">E</span> 
 
\t \t \t \t \t <span class="letter">F</span> 
 
\t \t \t \t \t <span class="letter">G</span> 
 
\t \t \t \t \t <span class="letter">H</span> 
 
\t \t \t \t \t <span class="letter">I</span> 
 
\t \t \t \t \t <span class="letter">J</span> 
 
\t \t \t \t \t <span class="letter">K</span> 
 
\t \t \t \t \t <span class="letter">L</span> 
 
\t \t \t \t \t <span class="letter">M</span> 
 
\t \t \t \t \t <span class="letter">N</span> 
 
\t \t \t \t \t <span class="letter">O</span> 
 
\t \t \t \t \t <span class="letter">P</span> 
 
\t \t \t \t \t <span class="letter">Q</span> 
 
\t \t \t \t \t <span class="letter">R</span> 
 
\t \t \t \t \t <span class="letter">S</span> 
 
\t \t \t \t \t <span class="letter">T</span> 
 
\t \t \t \t \t <span class="letter">U</span> 
 
\t \t \t \t \t <span class="letter">V</span> 
 
\t \t \t \t \t <span class="letter">W</span> 
 
\t \t \t \t \t <span class="letter">X</span> 
 
\t \t \t \t \t <span class="letter">Y</span> 
 
\t \t \t \t \t <span class="letter">Z</span> 
 
\t \t \t \t \t <h2 class="instructions"></h2> 
 
\t \t \t \t \t <h2 id="gameover"> 
 
\t \t \t \t \t \t GAME OVER <br> Click restart button to begin a new game 
 
\t \t \t \t \t </h2> 
 
\t \t \t \t \t <h2 id="wongame"> CONGRATULATION!<br> YOU WON!!!</h2> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="col-md-4"> 
 
\t \t \t \t <div class="centerbottomrow"> 
 
\t \t \t \t \t <table> 
 
\t \t \t \t \t  <tr class="word-row"> 
 
\t \t \t \t \t  </tr> 
 
\t \t \t \t \t </table> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</body> 
 
</html>

來源

2017-01-10 07:58:20 backpackcoder

相關問題

 相關問題