爲什麼我的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;。

編輯：@FlipFloop將此評論作爲答案發布在下面的代碼片段中，以獲得完整性。全屏運行並關閉#game的position: relative;以說明問題/解決方案。

$(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，以便捕獲您的選項數據。在你的代碼中你只會尋找Dark值！

當我嘗試這個（我不得不病情輕），它適用於光值：

$(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不能正常顯示？

回答

相關問題