JS:jquery中的addClass函数由于某种原因什么也没做

时间:2017-09-28 20:12:30

标签: javascript jquery arrays

函数showColorStart()由于某种原因什么也没做。执行该函数时,正方形的背景需要更改为数组colorspicked [lindex]中字符串的颜色,并且它不会执行任何操作。我多次查看代码,我无法找到问题。 我该如何解决?

codepen是here

df1
Out[36]: 
       df1
0  LFTEG42
1  JOCOROW
2  TLR_U01
3  PR_UDG5


df2
Out[37]: 
     df2
0  X,Y,Z
1    1,2
2      I
3    O,M
// 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;
}

2 个答案:

答案 0 :(得分:3)

你在这一行上加了一个加号,这里不属于错误

var playerTurn = true+;

更改为

var playerTurn = true;

答案 1 :(得分:0)

Yupp, 从代码中删除 + 符号,第4行错误,

i

将其替换为 var playerTurn = true;

这是你的错误, 删除后,将正常工作。