Question

我试图根据发生的点击让一些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">&nbsp;&nbsp;&nbsp;<input type="text" class="teamEntry" name="team1" value="Team1"><br>
            <input type="checkbox" name="team" value="2">&nbsp;&nbsp;&nbsp;<input type="text" class="teamEntry" name="team2" value="Team2"><br>
            <input type="checkbox" name="team" value="3">&nbsp;&nbsp;&nbsp;<input type="text" class="teamEntry" name="team3" value="Team3"><br>
            <input type="checkbox" name="team" value="4">&nbsp;&nbsp;&nbsp;<input type="text" class="teamEntry" name="team4" value="Team4"><br>
            <input type="checkbox" name="team" value="5">&nbsp;&nbsp;&nbsp;<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">&nbsp;</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工作不正常，还是我的代码错了？

Answer 1

您错过了100pointCol1数组中selectionName等中的“s”。

Answer 2

当我浏览时，只是一个快速回答，但我记得z-index使用相同的位置类型。即＆＃34;绝对＆＃34;使用绝对和＆＃34;亲属＆＃34;与亲戚合作

在div工作时遇到z-index问题。是jsfiddle？

2 个答案: