내 div가 제대로 표시되지 않는 이유는 무엇입니까?

현재 HTML, CSS 및 jQuery로 게임을 만들고 있습니다. 이것은 일반적인 떨어지는 블록 피하기 게임 것입니다.내 div가 제대로 표시되지 않는 이유는 무엇입니까?

내 jQuery에 문제가 있습니다. 내가 (단지 어둠의 테마는 현재 "작업"입니다) 테마를 선택하면, 플레이어는 표시되지 않습니다 :

$(document).ready(function() { 
 

 
    $('#options').change(function() { // NOTE: all themes have capital letters on colors 
 
    if ($(this).val() === 'Dark') { 
 
     $("#game").css("background-color", "black"); 
 
     $("#player").css({ 
 
     "background-color": "white" // using CSS function in case you want to add other stuff 
 
     }); 
 
    } 
 
    }); 
 

 
    $("#play").click(function() { 
 
    $(this).hide(); 
 
    $("#options").hide(); 
 
    $("#player").show(); 
 
    }); 
 

 

 
});

body { 
 
    background-color: #FFFFFF; 
 
    font-family: helvetica, sans-serif; 
 
} 
 
.block { 
 
    width: 60px; 
 
    height: 60px; 
 
    position: absolute 
 
} 
 
#game { 
 
    width: 1000px; 
 
    height: 550px; 
 
    border: 3px solid #000000; 
 
    margin: 2% 10%; 
 
} 
 
#player { 
 
    width: 40px; 
 
    height: 40px; 
 
    left: 50%; 
 
    bottom: 0; 
 
    position: absolute 
 
} 
 
#play { 
 
    padding: 1%; 
 
    color: white; 
 
    background-color: black; 
 
    border-style: solid; 
 
} 
 
#options {}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Trash Fall - Game</title> 
 

 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
 
    <!-- adding jQuery to the script --> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body> 
 

 
    <h1 id="main_title">Color Drop</h1> 
 

 
    <div id="game"> 
 

 
    <button id="play">Play</button> 
 
    <select id="options"> 
 
     <option value="none">none (choose one in order to play)</option> 
 
     <option value="Dark">Dark</option> 
 
     <option value="Light">Light</option> 
 
     <option value="Blue_White">Blue/White</option> 
 
     <option value="Red_White">Red/White</option> 
 
    </select> 
 

 
    <div id="player"></div> 
 

 
    </div> 
 

 
</body> 
 

 
</html>

주 :이 스 니펫에서 작동하고 있지만 github에서는 작동하지 않습니다 (여기서 t 그 게임) : example GitHub

왜 작동하지 않습니까?

플러스 : 테마와 플레이어가 게임 섹션에 추가되는 이유는 무엇입니까?

GitHub의 링크 : 모든 https://github.com/FlipFloop/Color-Drop

감사합니다!

출처

2016-06-06 FlipFloop

정확하게 작동하지 않는 것을 ? 다크 테마를 선택하면 검정색 바탕에 흰색 상자가 보입니다. Chrome을 실행 중입니다. –

@Fabio는 GitHub 예를보고 – FlipFloop

나는 그것을보고있다. 그것은 무엇을해야 하는가? 스 니펫과 github 예제 모두 동일한 결과를 제공합니다. –

#player이 position: absolute; 가지고 있지만 #game가 배치되지 않으므로 플레이어는 단지 문서의 하단에 표시되며, 일반적으로 보이지 않음 (흰색 바탕에 흰색). #game에 position:relative;이 표시되도록하십시오.

EDIT : @FlipFloop이 주석을 아래 코드 조각과 함께 답변으로 게시하여 완성도를 높이십시오. 전체 화면을 실행하여 position: relative;이 #game 인 경우 켜고 끄고 문제/솔루션을 설명하십시오.

$(document).ready(function() { 
 

 
    $('#options').change(function() { // NOTE: all themes have capital letters on colors 
 
    if ($(this).val() === 'Dark') { 
 
     $("#game").css("background-color", "black"); 
 
     $("#player").css({ 
 
     "background-color": "white" // using CSS function in case you want to add other stuff 
 
     }); 
 
    } 
 
    }); 
 

 
    $("#play").click(function() { 
 
    $(this).hide(); 
 
    $("#options").hide(); 
 
    $("#player").show(); 
 
    }); 
 

 

 
});

body { 
 
    background-color: #FFFFFF; 
 
    font-family: helvetica, sans-serif; 
 
} 
 
.block { 
 
    width: 60px; 
 
    height: 60px; 
 
    position: absolute 
 
} 
 
#game { 
 
    width: 1000px; 
 
    height: 550px; 
 
    border: 3px solid #000000; 
 
    margin: 2% 10%; 
 
    position: relative; 
 
} 
 
#player { 
 
    width: 40px; 
 
    height: 40px; 
 
    left: 50%; 
 
    bottom: 0; 
 
    position: absolute; 
 
} 
 
#play { 
 
    padding: 1%; 
 
    color: white; 
 
    background-color: black; 
 
    border-style: solid; 
 
} 
 
#options {}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Trash Fall - Game</title> 
 

 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
 
    <!-- adding jQuery to the script --> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body> 
 

 
    <h1 id="main_title">Color Drop</h1> 
 

 
    <div id="game"> 
 

 
    <button id="play">Play</button> 
 
    <select id="options"> 
 
     <option value="none">none (choose one in order to play)</option> 
 
     <option value="Dark">Dark</option> 
 
     <option value="Light">Light</option> 
 
     <option value="Blue_White">Blue/White</option> 
 
     <option value="Red_White">Red/White</option> 
 
    </select> 
 

 
    <div id="player"></div> 
 

 
    </div> 
 

 
</body> 
 

 
</html>

출처

2016-06-07 21:32:59 bags

조건문을 사용해야합니다. 예 : 스위치 또는 if/else if/else를 사용하여 옵션 데이터를 포착하십시오. 귀하의 코드에서 당신은 어두운 가치를 찾고 있습니다! 나는 이것이 (내가 빛 조건이 있었다) 때

, 그것은 빛 가치를 작동합니다

$(document).ready(function() { 
     console.log("ok"); 

    $('#options').change(function(){ // NOTE: all themes have capital letters on colors 
     console.log("ok"); 
    if($(this).val() === 'Dark'){ 
     $("#game").css("background-color", "black"); 
     $("#player").css({ 
     "background-color": "white" // using CSS function in case you want to add other stuff 
     }); 
    } 
    if($(this).val() === 'Light'){ 
     $("#game").css("background-color", "white"); 
     $("#player").css({ 
     "background-color": "white" // using CSS function in case you want to add other stuff 
     }); 
    } 
    }); 

    $("#play").click(function() { 
    $(this).hide(); 
    $("#options").hide(); 
    $("#player").show(); 
    }); 


});

출처

2016-06-06 20:01:34

내 div가 제대로 표시되지 않는 이유는 무엇입니까?

답변

관련 문제