如何将各种var放入HTML中创建的容器中
how can I take various VARs and place them into a container created in the 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">
<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"answers"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(){
});
});
});
});
});
@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] );
});
相关文章：
- 从Javascript和Php变量创建Html模板文档
- 为非列表项目创建HTML实时搜索
- 使用javascript动态创建html内容/元素
- 如何使用jQuery动态创建HTML输入
- 在 JQUERY 中创建 HTML 后，Jquery 方法不起作用
- 使用HTML标记中的JS变量在Javascript中动态创建HTML
- 如何使用jQuery和乘法行和列创建HTML表
- MVC 4:使用 JQUERY 和 PartViewResult 动态创建 HTML 文本框.如果代码是动态添加的，如何
- 如何将函数绑定到使用链接函数创建 HTML 的角度指令
- 我需要使用AngularJS从JSON文件创建HTML元素
- 从Ajax Arraybuffer响应类型创建HTML画布
- 创建HTML对象的Javascript与创建HTML字符串的比较
- 在动态创建html元素之后，是否可以触发事件
- 如何在动态创建html时实现分层标题组织
- 如何从输入到url的路径创建html文件
- 从sql server中用javascript创建HTML表
- 如何在表单中创建html元素，而无需重新加载页面
- 做全栈JavaScript框架在客户端或服务器上创建HTML
- 使用JQuery创建HTML父标记
- 在服务器端创建html元素VS将数据作为JSON获取，并使用javascript创建标签
