1

在下面的代码中，我尝试（使用 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>

查询：

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

有人对解决方案有任何想法吗？

4

2 回答 2

3

根据以下评论的进一步说明进行更新

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

演示：小提琴

于 2013-06-14T11:26:24.257 回答
2

您首先需要删除.text()函数中的这些逗号，然后使用该JSON.stringify()方法打印这些对象。

你的功能应该是这样的：

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

您也可以参考这个StackOverflow 问题。

于 2013-06-14T11:28:42.673 回答