我目前正在使用 HTML、CSS 和 jQuery 制作游戏。这将是通常的避免掉落方 block 游戏。
不过我在使用 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(我创建游戏的地方)上无效:example GitHub
为什么这不起作用？
另外:为什么在我们选择主题时将主题和玩家添加到游戏部分？
GitHub 链接:https://github.com/FlipFloop/Color-Drop
感谢大家!
最佳答案
#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>关于javascript - 为什么我的 div 没有正确显示？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37665298/