[英]unwanted returning empty object
在下面的代碼中,我嘗試(使用Jquery)創建具有數組的對象,然后在單擊鏈接時調用這些對象以顯示在現有DIV中。
我基本上創建了一個5x5的矩陣; 其中,每個“框”都包含一個鏈接。
我編寫的當前代碼返回此:[對象對象]。 (我認為這是一個空數組。
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" class="center">
<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的:
$(document).ready(function () {
/***The objects that I am creating with arrays***/
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':'A',
'$200':'B',
'$300':'C',
'$400':'D',
'$500':'E'
};
var columnThree = {
'$100':'F',
'$200':'G',
'$300':'H',
'$400':'I',
'$500':'J'
};
var columnFour = {
'$100':'K',
'$200':'L',
'$300':'M',
'$400':'N',
'$500':'O'
};
var columnFive = {
'$100':'P',
'$200':'Q',
'$300':'R',
'$400':'S',
'$500':'T'
};
/***To call back each object when the link is clicked***/
$('li').on('click', 'a', function() {
var foo = $(this).text();
$("#clueContainer").text(columnOne, columnTwo, columnThree, columnFour, columnFive[foo]);
});
/***makes the main screen disappear and the new DIV appear***/
$("#container").click(function(){
$("#container").hide(function(){
$("#clueContainer").show(function(){
});
});
/***makes the new DIV disappear and the main screen reappear***/
$("#clueContainer").click(function(){
$("#clueContainer").hide(function(){
$("#container").show(function(){
});
});
});
});
});
有人對解決方案有任何想法嗎?
根據以下評論的進一步說明進行更新
$(document).ready(function () {
/***The objects that I am creating with arrays***/
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':'A',
'$200':'B',
'$300':'C',
'$400':'D',
'$500':'E'
};
var columnThree = {
'$100':'F',
'$200':'G',
'$300':'H',
'$400':'I',
'$500':'J'
};
var columnFour = {
'$100':'K',
'$200':'L',
'$300':'M',
'$400':'N',
'$500':'O'
};
$('#rowFour').data('qstns', columnFour);
var columnFive = {
'$100':'P',
'$200':'Q',
'$300':'R',
'$400':'S',
'$500':'T'
};
$('#rowFive').data('qstns', columnFive);
/***To call back each object when the link is clicked***/
var $rows = $('#rowOne, #rowTwo, #rowThree, #rowFour, #rowFive');
var columns = [columnOne, columnTwo, columnThree, columnFour, columnFive];
$('li').on('click', 'a', function() {
var $this = $(this);
var foo = $this.text();
var qstns = columns[$this.closest('li').index()];
$("#clueContainer").text(qstns[foo]);
});
/***makes the main screen disappear and the new DIV appear***/
$("#container").click(function(){
$("#container").hide(function(){
$("#clueContainer").show(function(){
});
});
});
/***makes the new DIV disappear and the main screen reappear***/
$("#clueContainer").click(function(){
$("#clueContainer").hide(function(){
$("#container").show(function(){
});
});
});
});
演示: 小提琴
您首先需要在.text()
函數中刪除那些逗號,然后使用JSON.stringify()
方法打印那些對象。
您的功能應如下所示:
$("#clueContainer").text(JSON.stringify(columnOne) +
JSON.stringify(columnTwo) +
JSON.stringify(columnThree) +
JSON.stringify(columnFour) +
columnFive[foo]);
您也可以參考此 StackOverflow問題。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.