文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何遍历多个元素，检查它们在jQuery中是否满足某些条件？

问如何遍历多个元素，检查它们在jQuery中是否满足某些条件？
EN

Stack Overflow用户
提问于 2017-01-10 14:25:06
回答 0查看 67关注 0票数 0

我正在建造一个小型的学校项目。这是一种命运之轮的游戏。我显示了一个字母表，每个字母都可以点击。当玩家点击一个字母时，它恰好是一个正确的猜测-该字母显示在词表中。如果积分变为0，玩家就会输，我试图让用户打开所有字母，并且分数超过0时，他就赢了。

因此，我想循环遍历word表上的所有框，并检查它们是否满足两个条件:1.如果字母应该存在，并且确实存在，2.如果显示了字母(我没有使用display none来隐藏它，我将其设为一个变量，并遍历不同长度的单词数组，这就是为什么我需要检查字母是否在那里，以及它是否应该在那里)。

在这一点上，游戏在第一次正确猜测后停止。

​

代码语言：javascript
复制
$(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         
    });
});
代码语言：javascript
复制
#gameover, #wongame {
	display: none;
}
代码语言：javascript
复制
<!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>

​

javascript
jquery
EN

回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/41562396

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档