0

我正在尝试将一些内容 AJAX 到#BlogContainer div 中，但似乎无法让我的点击功能正常工作。它似乎在 if 语句中分崩离析，但我不知道为什么。我已经用警报进行了测试，并且 JSON 的返回按应有的方式通过。初始加载也可以正常工作，它只是遍历 JSON 返回并将 url 返回到似乎不起作用的加载函数。

我想要实现的效果是使用 .load 和 JSON 文件中指向内容的 URL 将页面内容（博客条目）加载到 #BlogContainer div 中，每次单击 #Nexus div 时迭代到下一个。

我的主要问题是通过 JSON 返回动态加载的最佳方法是什么？我有一个 each 函数，它也做了完全相同的事情（它似乎返回了正确的结果，但实际上并没有加载内容）。我决定改用 for 循环，因为我读到的内容表明它的效率稍高一些，尽管我怀疑它对我的情况会有很大影响。

我对 JS / JQ 完全陌生，以前使用 JQueryTools 可以按照我想要的方式运行一切，但我认为最好的学习方法是自己做（当然需要一点帮助：））。

HTML 

<div id="BlogContainer"></div>
<div id="NexusRef" alt="03151201.htm">'03151201.htm'</div>

JSON

{
    "0": "'03151201.htm'",
    "1": "'01191201.htm'",
    "2": "'00000103.htm'",
    "3": "'00000102.htm'",
    "4": "'00000101.htm'"
}​

Javascript

$(function() {
    $('#Navigation').load('navi.htm');
    $('#BlogContainer').load('03151201.htm');
    $('#TT1').load('ajtt1.htm');
    $('#TT2').load('ajtt2.htm')
});

$(function() {
    $('#Nexus').click(function() {
        $.getJSON("BlogRoll.json", function(data) {
            var i = 0;
            var n = ($('#NexusRef').html());
            var length = data.length;

            for (i = 0; i < length; i++) {
                if (data[i] == n) {
                    $(function() {
                        $('#BlogContainer').load(data[i + 1]);
                    });
                } else {
                    alert(data[i + 1]);
                }
            }
        });
    });
});​
4

1 回答 1

1

这应该这样做

$(function() {
    //assuming you have this JSON to work with:
    var pages = {
        "0": "'03151201.htm'",
        "1": "'01191201.htm'",
        "2": "'00000103.htm'",
        "3": "'00000102.htm'",
        "4": "'00000101.htm'"
    }

    //add a click handler to your button
    $('#Nexus').on('click', function() {

        //prepare a storage url
        var url;

        //pick out first link, copy, and remove it
        //works like Array.shift()
        for (var key in pages) {
            if (pages.hasOwnProperty(key)) {
                url = pages[key];
                delete pages[key]
                break;
            }
        }

        //Do a GET to retrieve contents and append to container
        $.get(url, function(contents) {
            var contents = url;
            $('#BlogContainer').append(contents);
        });
    });
});​
于 2012-04-11T00:48:18.897 回答