javascript - 计数器在 jQuery 中不起作用

标签 javascript jquery if-statement

我正在尝试运行我的计数器 3 次。一旦我尝试了 3 次,该按钮就应该被禁用。我尝试了此解决方案的几种变体但无济于事。问题出在我的 rollItAgain 函数上。我的计数器从 3 开始,里面有一个带有 if 语句的 for 循环。我也在我的 if 语句中运行我的 randomFunction() ,不确定这是否是好的做法。截至目前,我只单击一次重新滚动,它就被禁用了。我希望它至少运行 3 次。

// 'use strict';
var array = [];

var random = Math.ceil(Math.random() * 9);
var newStars = "<div class='star'><img src='http://i.imgur.com/kXH65I7.png'></div>";

$(document).ready(init);

function init(){
	for (var i = 0; i < random; i++){
		$('#starbox').append(newStars);
		//Create Event Handler for selectNumbers Function		
	}
	$('.numbers').click(selectNumbers);
	$('#checked').click(confirm);
	$('.numbers').click(toggleButton);
	$('#playagain').click(playItAgain);
	$('#reroll').click(rollItAgain);

}

function randomFunction(){
	$('#starbox').empty();
	random = Math.ceil(Math.random() * 9);
	for (var i = 0; i < random; i++){
		$('#starbox').append(newStars);
	}
}	

//selectNumbers function
function selectNumbers(){
	var num  = $(this).text();
	// $(this).css('background-color', 'red');
	array.push(num);
	// console.log(array);
	sum = array.reduce(function(a, b){
		return Number(a) + Number(b);
	});
	console.log(sum);
	//Check if numbers has select class
	console.log(num);
}


function toggleButton(){
 
	$(this).toggleClass('select');

}

function confirm(){
	if (sum === random){
		$('#displayResult').append("Correct!");
		// $('.select').css('display', 'none');
	} else {
		$('#displayResult').append("Wrong, try again!!");
	}

	$('.select').remove();
}

function rollItAgain(){
	// debugger;
	var counter = 3;
	// debugger;
	for (var j = 0; j < counter; j++){
		if(j === counter){
			
			randomFunction();
			counter++;
			
		} else {
			$('#reroll').attr('disabled', 'disabled');
		}
	}	
}

function playItAgain(){

	location.reload();
}
#numberbox {
	width: 400px;
	height: 100px;
	border: 2px solid green ;
}

.numbers {
	height: 100px;
    width: 100px;
    background-color:transparent;
    border: 2px solid #000;
    margin: 5px;
    line-height: 100px;
    display: inline-block;
    border-radius: 50%;
    text-align: center;
    border: 2px solid #000;
    font-size: 30px;


}

#starbox {

	min-height: 300px;
    min-width: 400px;
    background-color:transparent;
    border: 2px solid #000;
    margin:100px 100px;

    
}

.star {
    display: inline-block;
}

.select {
    background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Mathgame1</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
	<script src="main.js"></script>
</head>

<body>
<div id="starbox"></div>
<p id="displayResult"></p>

<table id="numberbox" >
<button id="playagain">Play it Again</button>
<button id="checked">checked</button>
<button id="reroll">reroll</button>
	<tr >
		<td class="numbers">1</td>
		<td class="numbers">2</td>
		<td class="numbers">3</td>
	</tr>
	<tr >
		<td class="numbers">4</td>
		<td class="numbers">5</td>
		<td class="numbers">6</td>
	</tr>
	<tr >
		<td class="numbers">7</td>
		<td class="numbers">8</td>
		<td class="numbers">9</td>
	</tr>
</table>
</body>
</html>

最佳答案

问问自己,为什么不会这段代码运行三遍?这就是循环的作用。您真正想要的不是循环,而是计数器。触发滚动的是点击事件,而不是计数循环。

首先,您误用了一些概念。您有一个 counter 变量,它看起来实际上代表计数器 maximumj 更适合称为您的计数器。但是您需要跟踪 rollItAgain 调用之间的计数器值,因此在函数的外部 声明它。然后每当调用 rollItAgain 时递增计数器。您不必编写循环,因为单击按钮会多次调用该函数。其次,更改支票;你想在计数器小于限制时运行随机函数:

var counter = 0;
var limit = 3;

function rollItAgain(){
    if (counter < limit) {
        randomFunction();
        counter++;
    } else {
        $('#reroll').attr('disabled', 'disabled');
    }
}   

关于javascript - 计数器在 jQuery 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35691131/

相关文章:

javascript - 为多级 JSON 创建 Breeze 元数据

javascript - 使用 html div 和 javascript 隐藏字段

c++ - 带逻辑或的 IF 语句

if-statement - 为什么无论如何都要评估 ifelse 宏的 "wrong"表达式?

javascript - Css 样式根据值文本更改

javascript - Three.js - 棋盘平面

java - javascript 图表库是否可自定义或与 JavaFX 兼容

php - 为每个 session 分配随机颜色,用于聊天

javascript - 尝试缩短我从 API 调用中得到的响应

jQuery 停止表单提交