Javascript 如何将各种变量放入HTML中创建的容器中？_Javascript_Jquery_Html

Javascript 如何将各种变量放入HTML中创建的容器中？

javascript jquery html

Javascript 如何将各种变量放入HTML中创建的容器中？,javascript,jquery,html,Javascript,Jquery,Html,我正在为我的妻子做一个危险问答游戏，她是一名学校老师。HTML被设置为具有多列和多行我的HTML示例： <body> <div id="container"> <div id="logo" class="center"> <img src="jeoparody.png" /> </div> <div id="wood" class="center"> <ul id="categories">

我正在为我的妻子做一个危险问答游戏，她是一名学校老师。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>

有没有人愿意帮助我实现我的目标，或者至少帮我找出我做错了什么

CSS:

这一个有效：

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

var foo2=$this.text columntwo[foo2]；第二列？可能有一件事是错误的：你的对象在最后一个属性的末尾有逗号。对象的属性之间只能有逗号：{prop1:'val1'，prop2:'val2'}。前面的两条注释都显示了类似工具可能会显示的错误/代码滥用。我已更正了错误；然而，我仍然不知道如何让各种变量显示，到目前为止，当我点击链接时，只有第一个变量显示。危险的目的是从各个级别（即100、200等）获取线索。。现在，当我点击等级100、200等时，我希望相应的线索或问题出现在显示的框中。因此，每一个有美元金额的盒子都需要有相应的线索或问题。现在，这些线索位于不同的VAR中，我想拉出与每个方块中的美元金额对应的特定线索。它不符合我的要求。当我点击不同的框时，我想从每一行的变量中提取代码并将它们放在容器中。您应该将相同的JS代码应用于其他函数。您还可以为每一行创建一个css选择器，并将其中的数组更改为columnOne。还可以创建二维数组，以便与行和列ID一起使用。

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

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