jQuery：addClass（）和removeClass（）由于某些原因不起作用

Question

我的代码在my codepen jQuery

＆＃13;

＆＃13;

// Setting Variables
var gameStatus = false;
var strict = false;
var playerTurn = false;
var colors = ['green', 'red', 'yellow', 'blue'];
var colorsPicked = ['red', 'yellow', 'blue'];
var colorsClicked = [];
var level = 1;
var lIndex = 0;
// Game Status Function
$('#start').click(function(){
    if(gameStatus == false){
        gameStatus = true;
        gameStart();
    }
});
// Game Start Function
function gameStart(){

}
// Chaning color buttons
$('.cubes').click(function(e){
    if(playerTurn == true){
        $(e.target).addClass(e.target.id);
        setTimeout(function(){
            $(e.target).removeClass(e.target.id);
        }, 500);
    } else {
        return;
    }
});
// Random Color Picking Function
function randomColor(){
    var random = Math.floor(Math.random() * 4);
    colorsPicked.push(colors[random]);
}
// Colors Showing at Start of a level
function showColorStart(){
    lIndex = 0;
    setInterval(function(){
        if(colorsPicked[lIndex] == 'green'){
        $('#green').addClass('green');
    } else if(colorsPicked[lIndex] == 'red'){
        $('#red').addClass('red');
    } else if(colorsPicked[lIndex] == 'yellow'){
        $('#yellow').addClass('yellow');
    } else if(colorsPicked[lIndex] == 'blue'){
        $('#blue').addClass('blue');
    }
    setTimeout(function(){
        $('#green').removeClass('green');
        $('#red').removeClass('red');
        $('#yellow').removeClass('yellow');
        $('#blue').removeClass('blue');
    }, 1000);
    if(lIndex == colorsPicked.length){
        clearInterval();
    }
    
    }, 500);
  lIndex++;
}

showColorStart();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="menu">
    <input type='button' value='Start/Restart' id='start' class='btn'>
    <input type='button' value='Strict' id='strict' class='btn'>
  </div>
  <div class='board'>
    <div class='display'><p id='disp'></p></div>
    <br>
    <table>
      <tbody>
        <tr>
          <td class='cubes' id='green'></td>
          <td class='cubes' id='red'></td>
        </tr>
        <tr>
          <td class='cubes' id='yellow'></td>
          <td class='cubes' id='blue'></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

在第38行，函数showColorStart（）中的间隔需要添加一个类并在半秒后删除另一个类，并且由于某种原因，颜色在屏幕上没有变化，颜色一次只闪烁一个颜色， 我怎样才能解决这个问题？

我已经尝试过调试并在谷歌上闲逛，但我还没有想出任何东西。任何建议将不胜感激。

Answer 1

nvm，我得到了答案，我的lindex ++不在区间函数中。 TY

Answer 2

我发现您已经解决了问题，但您可能希望了解showColorStart()会大大简化。

递归避免了setInterval()的需要，这有点麻烦。

function showColorStart(i) {
    var color = colorsPicked[i];
    if(!color) return;
    $('#' + color).addClass(color); // much more concise than if()...else...else...
    setTimeout(function() {
        $('#' + color).removeClass(color);
        showColorStart(i + 1); // recursive call to showColorStart()
    }, 1000);
}

Answer 3

这是工作解决方案：

// Setting Variables
var gameStatus = false;
var strict = false;
var playerTurn = false;
var colors = ['green', 'red', 'yellow', 'blue'];
var colorsPicked = ['red', 'yellow', 'blue'];
var colorsClicked = [];
var level = 1;
var lIndex = 0;
// Game Status Function
$('#start').click(function(){
    if(gameStatus == false){
        gameStatus = true;
        gameStart();
    }
});
// Game Start Function
function gameStart(){

}
// Chaning color buttons
$('.cubes').click(function(e){
    if(playerTurn == true){
        $(e.target).addClass(e.target.id);
        setTimeout(function(){
            $(e.target).removeClass(e.target.id);
        }, 500);
    } else {
        return;
    }
});
// Random Color Picking Function
function randomColor(){
    var random = Math.floor(Math.random() * 4);
    colorsPicked.push(colors[random]);
}
// Colors Showing at Start of a level
function showColorStart(){
    lIndex = 0;
    setInterval(function(){
        if(colorsPicked[lIndex] == 'green'){
        $('#green').addClass('green');
    } else if(colorsPicked[lIndex] == 'red'){
        $('#red').addClass('red');
    } else if(colorsPicked[lIndex] == 'yellow'){
        $('#yellow').addClass('yellow');
    } else if(colorsPicked[lIndex] == 'blue'){
        $('#blue').addClass('blue');
    }
    setTimeout(function(){
        $('#green').removeClass('green');
        $('#red').removeClass('red');
        $('#yellow').removeClass('yellow');
        $('#blue').removeClass('blue');
    }, 2500);
    if(lIndex == colorsPicked.length){
        clearInterval();
    }
    lIndex++;
    }, 500);
  
}

showColorStart();

@import url('https://fonts.googleapis.com/css?family=Orbitron');

body {
  background-color: #000;
  margin: 0;
  padding: 0;
}

.container {
  margin: 0 auto;
  text-align: center;
  padding: 20px;
}

.menu {
  margin-bottom: 20px;
}

.display {
  width: 130px;
  height: 40px;
  background-color: #282828;
  margin: 0 auto;
  text-align: center;
  font-family: Orbitron, sans-serif;
}

table {
  margin: 0 auto;
}

.cubes {
  width: 150px;
  height: 150px;
}

#green {
  border: 2px solid green;
  border-right: 2px solid red;
}

#red {
  border: 2px solid red;
  border-bottom: 2px solid blue;
}

#yellow {
  border: 2px solid yellow;
}

#blue {
  border: 2px solid blue;
}

.green {
  background-color: green;
}

.red {
  background-color: red;
}

.yellow {
  background-color: yellow;
}

.blue {
  background-color: blue;
}

#disp {
  font-size: 12px;
  color: #000;
  padding: 8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
  <div class="menu">
    <input type='button' value='Start/Restart' id='start' class='btn'>
    <input type='button' value='Strict' id='strict' class='btn'>
  </div>
  <div class='board'>
    <div class='display'><p id='disp'></p></div>
    <br>
    <table>
      <tbody>
        <tr>
          <td class='cubes' id='green'></td>
          <td class='cubes' id='red'></td>
        </tr>
        <tr>
          <td class='cubes' id='yellow'></td>
          <td class='cubes' id='blue'></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>