在下面的代码中，我尝试(使用 Jquery)创建带有数组的对象，然后在单击链接时调用这些对象以显示在现有 DIV 中。
我基本上创建了一个 5x5 的矩阵；其中，每个“框”都包含一个链接。
我编写的当前代码返回:[object object]。 (我相信这是一个空数组。
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(){
});
});
});
});
演示:Fiddle
关于jquery - 不需要的返回空对象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17107369/