1. 首頁
  2. 問答
  3. 我如何獲取各種VAR並將它們放入HTML中創建的容器中？

我如何獲取各種VAR並將它們放入HTML中創建的容器中？

2013-06-05 51 views
1

我正在爲我的妻子（誰是學校老師）的危險（問答遊戲）遊戲工作。 HTML設置爲具有多列和多行。我的HTML的我如何獲取各種VAR並將它們放入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>

什麼，我試圖做的是點擊每一行和每一列和「一」帶我去一個容器外殼線索的「禮」。在我的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;}

來源

2013-06-05 justLearning

+1

'變種foo2的= $（本）的.text（columnTwoTwo [foo2的]）;'** ** columnTwoTwo？一個錯字可能 –

+1

有一件事是錯誤的：你的對象在最後一個屬性的末尾有逗號。對象只能在**屬性之間使用逗號**：'{prop1：'val1'，prop2：'val2'}'。 –

+0

前面的兩個評論都揭示了像[JSHint]（http://www.jshint.com/）這樣的工具會顯示錯誤的拼寫錯誤/代碼錯誤。 –

回答

0

這一個工程：

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

來源

2013-06-05 07:37:17

+0

謝謝，我會試試 – justLearning

+0

它沒有做我想做的事。我想從每行的VAR中獲取代碼，並在單擊各個框時將它們放入容器中。 – justLearning

+0

好吧，這部分也沒有工作。你應該使用相同的JS代碼給你其他功能。您也可以爲每一行創建一個css選擇器並更改其中的數組（columnOne）。你也可以創建二維數組，所以你可以使用行和列ID。 –

相關問題

 相關問題