1
我想运行我的柜台3次。一旦我达到3次尝试按钮应该被禁用。我尝试了这种解决方案的几个变种无济于事。这个问题对我的rollItAgain函数是正确的。我有我的计数器从3开始，并有一个if语句的循环。我也在我的if语句中运行我的randomFunction（），不知道这是否是一种好的做法。截至目前，我只点击重新卷动一次，它被禁用。我希望它至少运行3次。计数器不工作在jQuery
// '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(){
\t for (var i = 0; i < random; i++){
\t \t $('#starbox').append(newStars);
\t \t //Create Event Handler for selectNumbers Function \t \t
\t }
\t $('.numbers').click(selectNumbers);
\t $('#checked').click(confirm);
\t $('.numbers').click(toggleButton);
\t $('#playagain').click(playItAgain);
\t $('#reroll').click(rollItAgain);
}
function randomFunction(){
\t $('#starbox').empty();
\t random = Math.ceil(Math.random() * 9);
\t for (var i = 0; i < random; i++){
\t \t $('#starbox').append(newStars);
\t }
} \t
//selectNumbers function
function selectNumbers(){
\t var num = $(this).text();
\t // $(this).css('background-color', 'red');
\t array.push(num);
\t // console.log(array);
\t sum = array.reduce(function(a, b){
\t \t return Number(a) + Number(b);
\t });
\t console.log(sum);
\t //Check if numbers has select class
\t console.log(num);
}
function toggleButton(){
\t $(this).toggleClass('select');
}
function confirm(){
\t if (sum === random){
\t \t $('#displayResult').append("Correct!");
\t \t // $('.select').css('display', 'none');
\t } else {
\t \t $('#displayResult').append("Wrong, try again!!");
\t }
\t $('.select').remove();
}
function rollItAgain(){
\t // debugger;
\t var counter = 3;
\t // debugger;
\t for (var j = 0; j < counter; j++){
\t \t if(j === counter){
\t \t \t
\t \t \t randomFunction();
\t \t \t counter++;
\t \t \t
\t \t } else {
\t \t \t $('#reroll').attr('disabled', 'disabled');
\t \t }
\t } \t
}
function playItAgain(){
\t location.reload();
}#numberbox {
\t width: 400px;
\t height: 100px;
\t border: 2px solid green ;
}
.numbers {
\t 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 {
\t 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>
\t <meta charset="UTF-8">
\t <title>Mathgame1</title>
\t <link rel="stylesheet" type="text/css" href="style.css">
\t <script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
\t <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>
\t <tr >
\t \t <td class="numbers">1</td>
\t \t <td class="numbers">2</td>
\t \t <td class="numbers">3</td>
\t </tr>
\t <tr >
\t \t <td class="numbers">4</td>
\t \t <td class="numbers">5</td>
\t \t <td class="numbers">6</td>
\t </tr>
\t <tr >
\t \t <td class="numbers">7</td>
\t \t <td class="numbers">8</td>
\t \t <td class="numbers">9</td>
\t </tr>
</table>
</body>
</html>
哪个按钮你要经过3次获得残疾？ –