我正在尝试让一些 div 根据持续的点击移动。我要移动的 div 应该在父/子域中处于同一级别。我的代码在这里:
http://jsfiddle.net/trout0525/L2hhof79/3/
<body>
<div id="startboard">
<br>
<br>
<br>
<center>
<span class="F11Notice">
Please right-click top menu bar blank area to<br>
make sure the status bar is not selected<br>
then press F11<br>
to turn-off the top tool bars<br>
This provides a proper interface for the game
</span>
</center>
<br>
<br>
<br>
<br>
<center>
<form>
<input type="checkbox" name="team" value="1"> <input type="text" class="teamEntry" name="team1" value="Team1"><br>
<input type="checkbox" name="team" value="2"> <input type="text" class="teamEntry" name="team2" value="Team2"><br>
<input type="checkbox" name="team" value="3"> <input type="text" class="teamEntry" name="team3" value="Team3"><br>
<input type="checkbox" name="team" value="4"> <input type="text" class="teamEntry" name="team4" value="Team4"><br>
<input type="checkbox" name="team" value="5"> <input type="text" class="teamEntry" name="team5" value="Team5"><br>
<br>
<br>
<input type="button" value="Start" id="startButton" onclick="startGame()">
</form>
</center>
</div>
<div id="scoreBoard">
<span id = "totalFor1">
Team 1<br>
$0
</span><br>
<span id = "totalFor2">
Team 2<br>
$0
</span><br>
<span id = "totalFor3">
Team 3<br>
$0
</span><br>
<span id = "totalFor4">
Team 4<br>
$0
</span><br>
<span id = "totalFor5">
Team 5<br>
$0
</span>
</div>
<div id="gameboard">
<div id="pointsCol1">
<div id="100pointsCol1" class="boardValue">$100</div>
<div id="200pointsCol1" class="boardValue">$200</div>
<div id="300pointsCol1" class="boardValue">$300</div>
<div id="400pointsCol1" class="boardValue">$400</div>
<div id="500pointsCol1" class="boardValue">$500</div>
</div>
<div id="pointsCol2">
<div id="100pointsCol2" class="boardValue">$100</div>
<div id="200pointsCol2" class="boardValue">$200</div>
<div id="300pointsCol2" class="boardValue">$300</div>
<div id="400pointsCol2" class="boardValue">$400</div>
<div id="500pointsCol2" class="boardValue">$500</div>
</div>
</div>
<div id="questionWindow"> </div>
</body>
还有与之配套的 CSS:
<style type="text/css">
#startboard{
z-index: 100;
position: absolute;
float: left;
top: 0px;
left: 0px;
width: 768px;
height: 512px;
overflow: hidden;
background-color: black;
}
.F11Notice {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 24px;
color: orange;
text-align: center;
}
.teamEntry {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 24px;
}
#scoreBoard {
z-index: 2;
position: absolute;
float: left;
top: 0px;
left: 0px;
width: 50px;
height: 200px;
color: yellow;
background-color: blue;
}
#gameboard {
z-index: 2;
position: relative;
float: left;
top: 0px;
left: 50px;
width: 400px;
height: 200px;
background-color: red;
}
.boardValue {
position: relative;
float: left;
width: 100px;
height: 40px;
line-height: 40px;
vertical-align: middle;
text-align: center;
color:green;
font-family: Elephant, Helvetica, sans-serif;
font-weight: bold;
font-size: 14px;
background: transparent;
box-sizing: border-box;
border: 2px white solid;
}
.boardValue:hover {
background-color: #cccccc;
color: black;
}
#pointsCol1 {
position: absolute;
float: left;
width: 150px;
height: 200px;
top: 0px;
left: 50px;
background: yellow;
box-sizing: border-box;
border: 1px green solid;
}
#100pointsCol1 {
top: 0px;
left: 0px;
}
#200pointsCol1 {
top: 40px;
left: 0px;
}
#300pointsCol1 {
top: 80px;
left: 0px;
}
#400pointsCol1 {
top: 120px;
left: 0px;
}
#500pointsCol1 {
top: 160px;
left: 0px;
}
#pointsCol2 {
position: absolute;
float: left;
width: 150px;
height: 200px;
top: 0px;
left: 200px;
background: purple;
box-sizing: border-box;
border: 1px green solid;
}
#100pointsCol2 {
top: 0px;
left: 0px;
}
#200pointsCol2 {
top: 40px;
left: 0px;
}
#300pointsCol2 {
top: 80px;
left: 0px;
}
#400pointsCol2 {
top: 120px;
left: 0px;
}
#500pointsCol2 {
top: 160px;
left: 0px;
}
#questionWindow {
z-index: 1;
position: absolute;
float: left;
width: 512px;
height: 256px;
padding: 0px;
margin: 0px;
top: 0px;
left:0px;
border: 0px none;
background: white;
}
这是一些 JavaScript:
var selectionName= [
"100pointCol1","200pointCol1","300pointCol1","400pointCol1","500pointCol1",
"200pointCol1","200pointCol2","300pointCol2","400pointCol2","500pointCol2"
];
var teamSelection = {};
teamSelection['1'] = {};
teamSelection['2'] = {};
teamSelection['3'] = {};
teamSelection['4'] = {};
teamSelection['5'] = {};
teamSelection['1']['Selected'] = false;
teamSelection['2']['Selected'] = true;
teamSelection['3']['Selected'] = false;
teamSelection['4']['Selected'] = false;
teamSelection['5']['Selected'] = false;
teamSelection['1']['Score'] = 0;
teamSelection['2']['Score'] = 0;
teamSelection['3']['Score'] = 0;
teamSelection['4']['Score'] = 0;
teamSelection['5']['Score'] = 0;
window.onload = function() {
$(function(){
for (var i=0; i < selectionName.length; i++) {
selection = selectionName[i];
$("#" + selection).bind("click", {sName: selection}, makeSelection);
}
});
}
function makeSelection(event) {
selection = event.data.sName;
$("#" + selection).unbind("click");
openQuestion(selection);
}
function startGame() {
$("#scoreboard").css("z-index", 100);
$("#gameboard").css("z-index", 100);
$("#startboard").css("z-index", 1);
}
function openQuestion(selection) {
$("#scoreboard").css("z-index", 1);
$("#gameBoard").css("z-index",1);
$("#questionWindow").css("z-index",100);
}
请在 JSFiddle 上尝试一下:
http://jsfiddle.net/trout0525/L2hhof79/3/
它应该显示启动板，然后在单击开始后隐藏启动板，这似乎有效，但它应该显示记分板和游戏板，它们确实显示，但是当您单击一美元的金额，它应该会弹出问题窗口。是我的代码还是 JSFiddle，因为当我不使用 JSFiddle 并在本地使用它时它似乎可以工作。我只是担心我的代码不正确，因为在我完成这一系列简单的操作后，我还有更多问题要提出。所以，基本上，是 JSFiddle 工作不正常，还是我的代码有误？
最佳答案
您在 selectionName 数组中缺少 100pointCol1 等中的“s”。
关于javascript - 在 div 上使用 z-index 时遇到问题。是jsfiddle吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25333781/