JQuery를 사용하여 색상 변경

Question

나는 여기에서 작업하고있는 게임을 가지고 있는데, 이는 td을 변수에 의존하는 색상으로 변경합니다. 이 변수를 무작위로 'lime'또는 'red'두 문자열 사이에서 선택하려면이 부분을 사용하십시오. 문제는 CSS를 td에 적용하는 것으로, 내가 할 수있는 한 올바르게 수행하고 있지만 작동하지 않는 것 같습니다.

이 잘못되는 두 가지

$().ready(function(){ 
 
    //Functions 
 
    $('td').click(function(){ 
 
    if($(this).hasClass('block')) return; 
 
    $(this).addClass(color); 
 
    $(this).addClass('block'); 
 
    $(this).css('background-color:'+color); 
 
    tilesLeft--; 
 
    if(color=='lime'){color='red';}else{color='lime';} 
 
    }); 
 
    
 
    //Variables 
 
    var color; 
 
    var tilesLeft = 9; 
 
    
 
    //Setup 
 
    if(Math.round(Math.random())==0){color='lime';}else{color='red';} 
 
}); 
 

 
//Intervals 
 
setInterval(function(){ 
 
    $('header').css('color:'+color); 
 
},1);

html, body { 
 
    background-color:black; 
 
    color:white; 
 
    text-align:center; 
 
    height: 100%; 
 
} 
 
td { 
 
    border: 1px solid white; 
 
    margin:1px; 
 
    width:30%;height:30%; 
 
} 
 

 
#board {height:500px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header>Tic Tac Toe</header> 
 
<table style='width:100%;height:95%;'> 
 
    <tr><td></td><td></td><td></td></tr> 
 
    <tr><td></td><td></td><td></td></tr> 
 
    <tr><td></td><td></td><td></td></tr> 
 
</table>

은 다음과 같습니다

• 가 $(this).css('background-color:'+color);는
• $(this).css('color:'+color); 텍스트 색상
을 변경하지 않는 배경 색상을 변경하지 않습니다

도움을 주셔서 감사합니다!

Answer 1

꽤 괜찮되지 않음 :

$(this).css('background-color', color); 

위, 아마도 분명히하여 color 변수가 성공적으로 유효한 CSS 색상 문자열로 설정되어 있다고 가정합니다.

아마도 문자열을 style 속성에 전달하려고 시도한 것 같습니다. 대신 css() 방법은 두 가지 접근하는 'property','value'을 제공합니다

css('background-color', 'red'); 

또는 재산-값의 객체 :

css({ 
    'background-color' : 'red' 
}); 

참고 :

• CSS :
  • Basic Color keywords.
  • Extended Color keywords.
• jQuery를 :
  • css().당신이 변경 여기

Answer 2

$(this).css('background-color:'+color); 

에

$(this).css({ 
    backgroundColor: color 
}); 

및

$('header').css('color:'+color); 

에

,

$('header').css({ 
    color: color 
}); 

는 준비 상태 :

내부에 간격을 넣어 그리고 그것은 작동합니다 :)

$(document).ready(function() { 
 
    //Functions 
 
    $('td').click(function() { 
 
    if ($(this).hasClass('block')) return; 
 
    $(this).addClass(color); 
 
    $(this).addClass('block'); 
 
    $(this).css({ 
 
     backgroundColor: color 
 
    }); 
 
    tilesLeft--; 
 
    if (color == 'lime') { 
 
     color = 'red'; 
 
    } else { 
 
     color = 'lime'; 
 
    } 
 
    }); 
 

 
    //Variables 
 
    var color; 
 
    var tilesLeft = 9; 
 

 
    //Setup 
 
    if (Math.round(Math.random()) == 0) { 
 
    color = 'lime'; 
 
    } else { 
 
    color = 'red'; 
 
    } 
 

 
    //Intervals 
 
    setInterval(function() { 
 
    $('header').css({ 
 
     color: color 
 
    }); 
 
    }, 1); 
 
});

html, 
 
body { 
 
    background-color: black; 
 
    color: white; 
 
    text-align: center; 
 
    height: 100%; 
 
} 
 
td { 
 
    border: 1px solid white; 
 
    margin: 1px; 
 
    width: 30%; 
 
    height: 30%; 
 
} 
 
#board { 
 
    height: 500px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header>Tic Tac Toe</header> 
 
<table style='width:100%;height:95%;'> 
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
</table>