如何将各种VAR放入HTML中创建的容器中？

时间：2013-06-05 04:14:44

标签： javascript jquery html

我正在为我的妻子（他是一名学校老师）开展一场Jeopardy（问答游戏）游戏。 HTML设置为包含多列和多行。

我的HTML示例：

<body>

<div id="container">

<div id="logo" class="center">

<img src="jeoparody.png" />

</div>

<div id="wood" class="center">
    <ul id="categories">
        <li>The Global Age</li>
        <li>Age of Revolutions</li>
        <li>Era of Global Wars</li>
        <li>The Post War Period</li>
        <li>Geography</li>
    </ul>

<div class="clear"></div>

<hr />

<div class="clear"></div>

    <ul id="rowOne">
        <li><a href="#">$100</a></li>
        <li><a href="#">$100</a></li>
        <li><a href="#">$100</a></li>
        <li><a href="#">$100</a></li>
        <li><a href="#">$100</a></li>
    </ul>

<div class="clear"></div>

    <ul id="rowTwo" class="center">
        <li><a href="#">$200</a></li>
        <li><a href="#">$200</a></li>
        <li><a href="#">$200</a></li>
        <li><a href="#">$200</a></li>
        <li><a href="#">$200</a></li>
    </ul>

<div class="clear"></div>

    <ul id="rowThree" class="center">
        <li><a href="#">$300</a></li>
        <li><a href="#">$300</a></li>
        <li><a href="#">$300</a></li>
        <li><a href="#">$300</a></li>
        <li><a href="#">$300</a></li>
    </ul>

<div class="clear"></div>

    <ul id="rowFour" class="center">
        <li><a href="#">$400</a></li>
        <li><a href="#">$400</a></li>
        <li><a href="#">$400</a></li>
        <li><a href="#">$400</a></li>
        <li><a href="#">$400</a></li>
    </ul>

<div class="clear"></div>

    <ul id="rowFive" class="center">
        <li><a href="#">$500</a></li>
        <li><a href="#">$500</a></li>
        <li><a href="#">$500</a></li>
        <li><a href="#">$500</a></li>
        <li><a href="#">$500</a></li>
    </ul>
</div>

<div id="footer" class="center"></div>

</div>

<div id="clueContainer" class="center"></div>

</body>

我试图做的是点击每行和每列的“li”，然后“a”将我带到容纳线索的容器中。在我的jQuery代码中，我为第一列完成了这项专长;但是，我无法编写将为每一列完成此操作的代码。

JQuery代码：

$(document).ready(function () {

    var columnOne = {
        "$100": "On the world political map, where were some of the major states and     empires located about 1500 A.D. (C.E.)?",
        "$200": "What were the artistic, literary, and intellectual ideas of the Renaissance?",
        "$300": "Where were the five world religions located around 1500 A.D. (C.E.)?",
        "$400": "What were the regional trading patterns about 1500 A.D. (C.E.)?",
        "$500": "Why were the regional trading patterns important?",
    };

var columnTwo = {
    "100": "What were the artistic, literary, and intellectual ideas of the Renaissance?",
    "200": "B",
    "300": "C",
    "400": "D",
    "500": "E",
};

var columnThree = {
    "100": "A",
    "200": "B",
    "300": "C",
    "400": "D",
    "500": "E",
};

var columnFour = {
    "100": "D",
    "200": "B",
    "300": "C",
    "400": "D",
    "500": "E",
};

var columnFive = {
    "100": "A",
    "200": "B",
    "300": "C",
    "400": "D",
    "500": "E",
};  

$('li').on('click', 'a', function () {
    var foo = $(this).text();
    $("#clueContainer").text( columnOne[foo] );
});

$("#rowTwo").on("click", "a", function () {
    var foo2 = $(this).text( columnTwoTwo[foo2] );
});

$("#container").click(function(){
$("#container").hide(function(){
    $("#clueContainer").show(function(){
    });
});

$("#clueContainer").click(function(){
$("#clueContainer").hide(function(){
    $("#container").show(function(){
    });
});
});

});
});

有人愿意帮助我实现目标，或者至少帮助我弄清楚我做错了什么？

CSS：

@font-face {
    font-family: 'korinna_btregular';
    src: url('fontsJ/korinna_regular_bt-webfont.eot');
    src: url('fontsJ/korinna_regular_bt-webfont.eot?#iefix') format('embedded-opentype'),
         url('fontsJ/korinna_regular_bt-webfont.woff') format('woff'),
         url('fontsJ/korinna_regular_bt-webfont.ttf') format('truetype'),
         url('fontsJ/korinna_regular_bt-webfont.svg#korinna_btregular') format('svg');
    font-weight: normal;
    font-style: normal;}

body{background-color: #000;}

hr{border: 3px solid #200b02;}

#wood{width: 960px;
height: auto;
background-image: url(woodGrain.png);
position: relative;
border: 3px solid #200b02;
-webkit-box-shadow: 5px 5px rgba(0, 0, 0, 1);}

#container{width: 100%;
margin: 5px;
padding: 5px;}

.center{width: 960px;
margin: 0px auto;}

.clear{clear: both;}

#logo{width: 960px;
height: 250px;
padding-top: 30px;
display: block;
text-align: center;
vertical-align: middle;
line-height: 250px;
background-color: #002290;}

#categories li{width: 175px;
height: 100px;
margin: 0px 5px 5px -8px;
display: inline-block;
border: 1px solid #fff;
color: #fff;
font-family: 'korinna_btregular';
text-transform: uppercase;
font-size: 14px;
vertical-align: middle;
border-radius: 10px 10px;
text-align: center;
vertical-align: middle;
line-height: 100px;
background-color: #002290;
-webkit-box-shadow: inset 0 0 3px 3px rgba(0, 0, 0, 1);}

#categories a{color: #fff;
text-decoration: none;}

#rowOne li{width: 175px;
height: 100px;
margin: 5px 5px 0px -8px;
display: inline-block;
border: 1px solid #fff;
color: #e6ca8b;
font-family: 'korinna_btregular';
text-transform: uppercase;
font-size: 48px;
font-weight: bold;
border-radius: 10px 10px;
text-align: center;
vertical-align: middle;
line-height: 100px;
background-color: #002290;
-webkit-box-shadow: inset 0 0 4px 4px rgba(0, 0, 0, 1);}

#rowOne a{color: #fcd830;
text-decoration: none;}

#rowOne li:hover{background-color: #a3bbfb;}

#rowTwo li{width: 175px;
height: 100px;
margin: 0px 5px 5px -8px;
display: inline-block;
border: 1px solid #fff;
font-family: 'korinna_btregular';
text-transform: uppercase;
font-size: 48px;
font-weight: bold;
border-radius: 10px 10px;
text-align: center;
vertical-align: middle;
line-height: 100px;
background-color: #002290;
-webkit-box-shadow: inset 0 0 4px 4px rgba(0, 0, 0, 1);}

#rowTwo a{color: #fcd830;
text-decoration: none;}

#rowTwo li:hover{background-color: #a3bbfb;}

#rowThree li{width: 175px;
height: 100px;
margin: 5px 5px 5px -8px;
display: inline-block;
border: 1px solid #fff;
font-family: 'korinna_btregular';
text-transform: uppercase;
font-size: 48px;
font-weight: bold;
border-radius: 10px 10px;
text-align: center;
vertical-align: middle;
line-height: 100px;
background-color: #002290;
-webkit-box-shadow: inset 0 0 4px 4px rgba(0, 0, 0, 1);}

#rowThree a{color: #fcd830;
text-decoration: none;}

#rowThree li:hover{background-color: #a3bbfb;}

#rowFour li{width: 175px;
height: 100px;
margin: 5px 5px 5px -8px;
display: inline-block;
border: 1px solid #fff;
font-family: 'korinna_btregular';
text-transform: uppercase;
font-size: 48px;
font-weight: bold;
border-radius: 10px 10px;
text-align: center;
vertical-align: middle;
line-height: 100px;
background-color: #002290;
-webkit-box-shadow: inset 0 0 5px 5px rgba(0, 0, 0, 1);}

#rowFour a{color: #fcd830;
text-decoration: none;}

#rowFour li:hover{background-color: #a3bbfb;}

#rowFive li{width: 175px;
height: 100px;
margin: 5px 5px 20px -8px;
display: inline-block;
border: 1px solid #fff;
font-family: 'korinna_btregular';
text-transform: uppercase;
font-size: 48px;
font-weight: bold;
border-radius: 10px 10px;
text-align: center;
vertical-align: middle;
line-height: 100px;
background-color: #002290;
-webkit-box-shadow: inset 0 0 5px 5px rgba(0, 0, 0, 1);}

#rowFive a{color: #fcd830;
text-decoration: none;}

#rowFive li:hover{background-color: #a3bbfb;}

#footer{width: 960px;
height: 20px;
background-color:#002290;}

/***Clues***/

#clueContainer{width: 900px;
height: 500px;
margin-top: 150px;
padding: 200px 100px 0 100px;
color: #fff;
font-family: 'korinna_btregular';
text-transform: uppercase;
font-size: 54px;
border: 1px solid #fff;
border-radius: 25px 25px;
background-color: #002290;
-webkit-box-shadow: inset 0 0 5px 5px rgba(0, 0, 0, 1);
display: none;}

1 个答案:

答案 0 :(得分：0)

这个有效：

$('li a').click(function () {
    var foo = $(this).html();
    //for debugging only, remove once it is working
    alert(foo);
    $("#clueContainer").html( columnOne[foo] );
});
相关问题
最新问题