gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 09:52:26 25 4
gpt4 key购买 nike

我正在尝试运行我的计数器 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com