javascript - JS : a addClass function in jquery for some reason does nothing

Question

出于某种原因，函数 showColorStart() 什么都不做。执行该函数时，方 block 的背景需要更改为数组 colorspicked[lindex] 中字符串的颜色，并且它不会什么都不做。我多次查看代码，但找不到问题所在。我该如何解决？

代码笔是here .

// Setting Variables
var gameStatus = false;
var strict = false;
var playerTurn = true+;
var colors = ['green', 'red', 'yellow', 'blue'];
var colorsPicked = ['green', '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');
    } else {
        return;
    }
    setTimeout(function(){
        $('#green', '#red', '#yellow', '#blue').removeClass('green, red, yellow, blue');
    }, 500);
    if(lIndex == colorsPicked.length){
        stopInterval();
    }
    }, 500);
  lIndex++;
}
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://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.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>

Answer 1

你在这行不属于导致错误的地方放了一个加号

var playerTurn = true+;

改为

var playerTurn = true;