不需要的返回空对象

Question

In the following code I am attempting (with Jquery) to create objects with arrays and then call those objects to appear in an existing DIV when I click a link. 在下面的代码中，我尝试（使用Jquery）创建具有数组的对象，然后在单击链接时调用这些对象以显示在现有DIV中。

I have basically created a matrix that is 5x5; 我基本上创建了一个5x5的矩阵； in which, each "box" contains a link. 其中，每个“框”都包含一个链接。

The current code that I have written returns this: [object object]. 我编写的当前代码返回此：[对象对象]。 (which I believe is an empty array. （我认为这是一个空数组。

HTML (I am only showing one row of the matrix, there are four more): 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: 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(){
    });
});
});
});
});

Does anyone have any idea for a solution? 有人对解决方案有任何想法吗？

Answer 1

Update based on further clarifications from comments below 根据以下评论的进一步说明进行更新

$(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(){
            });
        });
    });
});

Demo: Fiddle 演示：小提琴

Answer 2

You first need to remove those commas in your .text() function then use the JSON.stringify() method to print those objects. 您首先需要在.text()函数中删除那些逗号，然后使用JSON.stringify()方法打印那些对象。

Your function should be like this: 您的功能应如下所示：

$("#clueContainer").text(JSON.stringify(columnOne) +  
    JSON.stringify(columnTwo) +  
    JSON.stringify(columnThree) + 
    JSON.stringify(columnFour) + 
    columnFive[foo]);

You may also refer to this StackOverflow question. 您也可以参考此 StackOverflow问题。

不需要的返回空对象

问题描述

2 个解决方案

解决方案1
3 已采纳 2013-06-14 11:26:24

解决方案2
2 2013-06-14 11:28:42

不需要的返回空对象

问题描述

2 个解决方案

解决方案1 3 已采纳 2013-06-14 11:26:24

解决方案2 2 2013-06-14 11:28:42

解决方案1
3 已采纳 2013-06-14 11:26:24

解决方案2
2 2013-06-14 11:28:42