Question

我试图运行我的计数器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>

Answer 1

问问自己为什么不会这段代码运行三次？这就是循环的作用。你真正想要的不是循环，而只是一个反击。触发滚动的是点击事件，而不是计数循环。

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

var counter = 0;
var limit = 3;

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

Answer 2

你的代码中的问题是你永远不会让if(j === counter){条件滚动骰子，因为你的迭代只能达到j < counter。所以这永远不会发生。

将您的功能重写为如下所示，查看演示 - Fiddle：

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

计数器无法在jQuery中工作

2 个答案: