Próbuję zdobyć kilka DIM, które się poruszają, na podstawie kliknięć, które idą. Divs, które próbuję przenieść, powinny być na tym samym poziomie w domenie rodzicielskiej / dziecka. Mam tutaj mój kod:

http://jsfiddle.net/Trout0525/L2HOF79/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>

I CSS, aby iść z nim:

<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;
}

Oto trochę 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);
}

Spróbuj go na JSFiddle:

http://jsfiddle.net/Trout0525/L2HOF79/3/

Ma pokazać startową, a następnie po kliknięciu Start, ukrywa startową, a to wydaje się działać, ale to ma przynieść tablicę wyników i grę, a te pokazują, ale wtedy, gdy klikniesz na kwotę dolara , ma wychowywać okno pytania. Czy to mój kod lub Jsfiddle, na to wydaje się działać, gdy nie używam JSFiddle i używaj go lokalnie. Martwię się tylko, mój kod jest nieprawidłowy, ponieważ mam dalsze pytania, aby wywołać po tym, jak otrzymam tę prostą serię działań. Więc zasadniczo, czy to JSFiddle nie działa dobrze, czy mój kod jest błędny?

0
trout0525 16 sierpień 2014, 00:31

2 odpowiedzi

Najlepsza odpowiedź

Brakuje ci "S" w 100pointCol1 itd. W tablicy selectionName.

0
jcaron 15 sierpień 2014, 23:59

Wystarczy szybka odpowiedź, kiedy odtłuszczam, ale przypominam sobie, że indeksu Z działa z tym samym typem pozycji. tj. "Absolute" pracy z absolutną i "względną" pracą z krewnym

-1
Tremmillicious 15 sierpień 2014, 23:52