1

次のコードでは、(Jquery を使用して) 配列を使用してオブジェクトを作成し、それらのオブジェクトを呼び出して、リンクをクリックしたときに既存の DIV に表示しようとしています。

私は基本的に 5x5 のマトリックスを作成しました。各「ボックス」にはリンクが含まれています。

私が書いた現在のコードは、[object object] を返します。（これは空の配列だと思います。

HTML (マトリックスの 1 行のみを表示しています。さらに 4 行あります):

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

誰にも解決策がありますか？

4

2 に答える 2

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 に答える