我正在尝试运行我的计数器 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 变量，它看起来实际上代表计数器 maximum。 j 更适合称为您的计数器。但是您需要跟踪 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/