簡體   English   中英

不需要的返回空對象

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM