如何遍历许多元素，检查jQuery中是否满足某些条件？
[英]How to loop through a number of elements, checking if they hold certain conditions in jQuery?
问题描述
I am building a small school project. 
我正在建立一个小型学校项目。 It is a wheel of fortune kind of game. 这是一种命运之轮。 I have an alphabet displayed and each letter is clickable. 我显示了一个字母，每个字母都可以单击。 When a player clicks on a letter and it happens to be a right guess - the letter shows on a word table. 当玩家点击一个字母时，恰好是正确的猜测-该字母显示在单词表上。 The player looses if points become 0, and I'm trying to make it so when a user opens all letters and will have more than 0 points he wins. 如果分数变为0，玩家就会放松，而我正在努力做到这一点，以便当用户打开所有字母并赢得超过0的分数时。
So, I want to loop through all boxes on a word table and check them all for two conditions: 1.if letter should be there and it is , 2.if the letter is shown(I do not use display none for hiding it, I made it a variable and loop through an array of words with different lengths, that is why I need to check if the letter is there and if it should be there). 因此，我想遍历单词表上的所有框并检查所有两个条件：1.如果应该存在字母并且是，2.如果显示了字母（我不使用display none来隐藏它，我将其设为变量，并遍历具有不同长度的单词数组，这就是为什么我需要检查字母是否存在以及是否应该存在的原因。
At this point game stops after first right guess. 在第一个正确的猜测之后，游戏将停止。
$(document).ready(function(){ var counter = 0; var points = 3000; var gameinplay = false; //array of words and hints var words = [{word: "lambent", hint: "softly bright or radiant, 7 letters"}, {word: "facetious", hint: "meant to be humorous or funny : not serious"}, {word: "obfuscate", hint: "to be evasive, unclear, or confusing"}]; //does a number of things when click start button $('#start').click(function(){ gameinplay = true; //moves the wheel $('#wheel').addClass('rotate').delay(15000).queue(function(next){ $('#wheel').removeClass('rotate'); next(); }); //shows hint when click start button $('#hint').text(words[counter].hint).show(); //shows points in the beginning $('#points').text(points + " points").show(); //shows alphabet $('.letter').show(); //changes start button to reset game $('#start').text("RESTART GAME").show(); //loops through an array of words and hints each time start button clicked for (var i = 0; i < words[counter].word.length; i++) { $('.wordLetter').eq(i).attr('data-letter', words[counter].word.charAt(i));//assigns a letter value to each box } //resets the game to the next word counter = counter + 1; }); //Make each letter an element - done! //Make each letter clickable $('.letter').click(function(){ 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 { display: none; }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="wheel.js"></script> <title>Wheel of Fortune</title> <link rel="stylesheet" type="text/css" href="wheel.css"> <link rel="stylesheet" type="text/css"href="bootstrap.css"></link> </head> <body> <div> <div class="row"> <div class="col-md-4"> <div class="centertoprow"> <button id="start" class="button button1">START</button></div> </div> <div class="col-md-4"> <div class="centertoprow"> <img id="logo" src="logo.jpg"> </div> </div> <div class="col-md-4"> <div class="centertoprow"> <h3 id="hint"></h3> </div> </div> </div> <div class="row"> <div class="col-md-4"> <div > <img id="wheel" src="wheel_of_fortune.jpg" alt="wheel_of_fortune"> </div> </div> <div class="col-md-4"> <div class="centerbottomrow"> <h3 id="points"></h3> <h2 id="comment"></h2> <span class="letter">A</span> <span class="letter">B</span> <span class="letter">C</span> <span class="letter">D</span> <span class="letter">E</span> <span class="letter">F</span> <span class="letter">G</span> <span class="letter">H</span> <span class="letter">I</span> <span class="letter">J</span> <span class="letter">K</span> <span class="letter">L</span> <span class="letter">M</span> <span class="letter">N</span> <span class="letter">O</span> <span class="letter">P</span> <span class="letter">Q</span> <span class="letter">R</span> <span class="letter">S</span> <span class="letter">T</span> <span class="letter">U</span> <span class="letter">V</span> <span class="letter">W</span> <span class="letter">X</span> <span class="letter">Y</span> <span class="letter">Z</span> <h2 class="instructions"></h2> <h2 id="gameover"> GAME OVER <br> Click restart button to begin a new game </h2> <h2 id="wongame"> CONGRATULATION!<br> YOU WON!!!</h2> </div> </div> <div class="col-md-4"> <div class="centerbottomrow"> <table> <tr> <td data-letter="" class="wordLetter"></td> <td data-letter="" class="wordLetter"></td> <td data-letter="" class="wordLetter"></td> <td data-letter="" class="wordLetter"></td> <td data-letter="" class="wordLetter"></td> <td data-letter="" class="wordLetter"></td> <td data-letter="" class="wordLetter"></td> <td data-letter="" class="wordLetter"></td> <td data-letter="" class="wordLetter"></td> </tr> </table> </div> </div> </div> </div> </body> </html>
1 个解决方案
解决方案1
0 2017-01-10 07:58:20
I did a couple things. 我做了两件事。 First I just created the word row and added the <td> 's dynamically which should allow for words of various lengths. 首先，我刚刚创建了单词row并动态地添加了<td> ，它应允许使用各种长度的单词。 The easiest way to then check to see if the whole word has been found is to check the text() function for that row. 然后查看是否已找到整个单词的最简单方法是检查该行的text()函数。 Hope this helps. 希望这可以帮助。
$(document).ready(function(){ var counter = 0; var points = 3000; var gameinplay = false; //array of words and hints var words = [{word: "lambent", hint: "softly bright or radiant, 7 letters"}, {word: "facetious", hint: "meant to be humorous or funny : not serious"}, {word: "obfuscate", hint: "to be evasive, unclear, or confusing"}]; //does a number of things when click start button $('#start').click(function(){ gameinplay = true; //moves the wheel $('#wheel').addClass('rotate').delay(15000).queue(function(next){ $('#wheel').removeClass('rotate'); next(); }); //shows hint when click start button $('#hint').text(words[counter].hint).show(); //shows points in the beginning $('#points').text(points + " points").show(); //shows alphabet $('.letter').show(); //changes start button to reset game $('#start').text("RESTART GAME").show(); //Create the list of <td> for each word for (var i = 0; i < words[counter].word.length; i++) { $('<td>') .data('letter', words[counter].word[i]) .text('_') .appendTo('.word-row'); } //resets the game to the next word counter = counter + 1; }); //Make each letter an element - done! //Make each letter clickable $('.letter').click(function(){ 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 { display: none; } .word-row>td { padding-right: 2px; }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="wheel.js"></script> <title>Wheel of Fortune</title> <link rel="stylesheet" type="text/css" href="wheel.css"> <link rel="stylesheet" type="text/css"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></link> </head> <body> <div> <div class="row"> <div class="col-md-4"> <div class="centertoprow"> <button id="start" class="button button1">START</button></div> </div> <div class="col-md-4"> <div class="centertoprow"> <img id="logo" src="logo.jpg"> </div> </div> <div class="col-md-4"> <div class="centertoprow"> <h3 id="hint"></h3> </div> </div> </div> <div class="row"> <div class="col-md-4"> <div > <img id="wheel" src="wheel_of_fortune.jpg" alt="wheel_of_fortune"> </div> </div> <div class="col-md-4"> <div class="centerbottomrow"> <h3 id="points"></h3> <h2 id="comment"></h2> <span class="letter">A</span> <span class="letter">B</span> <span class="letter">C</span> <span class="letter">D</span> <span class="letter">E</span> <span class="letter">F</span> <span class="letter">G</span> <span class="letter">H</span> <span class="letter">I</span> <span class="letter">J</span> <span class="letter">K</span> <span class="letter">L</span> <span class="letter">M</span> <span class="letter">N</span> <span class="letter">O</span> <span class="letter">P</span> <span class="letter">Q</span> <span class="letter">R</span> <span class="letter">S</span> <span class="letter">T</span> <span class="letter">U</span> <span class="letter">V</span> <span class="letter">W</span> <span class="letter">X</span> <span class="letter">Y</span> <span class="letter">Z</span> <h2 class="instructions"></h2> <h2 id="gameover"> GAME OVER <br> Click restart button to begin a new game </h2> <h2 id="wongame"> CONGRATULATION!<br> YOU WON!!!</h2> </div> </div> <div class="col-md-4"> <div class="centerbottomrow"> <table> <tr class="word-row"> </tr> </table> </div> </div> </div> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何通过jQuery遍历某个类型的所有元素？ - How can I loop through all elements of a certain type through jQuery?
Javascript：如何遍历元素并为某些元素调用onblur处理程序 - Javascript: How to loop through elements and call onblur handler for certain elements
如何遍历以数字结尾的元素 - How to Loop Through Elements Ending with a number
如何使用jquery处理php循环元素 - How to handle php loop through elements with jquery
"jQuery：如何遍历具有数据属性的元素" - jQuery: how to loop through elements with data attribute
如何遍历jQuery的所有元素 - How to loop through all elements jQuery
在执行代码之前，如何遍历某些类的所有元素？ - How to loop through all elements of certain class BEFORE executing a code?
如何循环数据并在执行一定次数后等待 - How to loop through data and wait after certain number of executions
用于检查XML中的元素的循环（JS / jQuery） - Loop for checking elements in XML (JS/jQuery)
jQuery - 遍历嵌套元素 - jQuery - Loop through nested elements
相关标签