0

一部のコンテンツを #BlogContainer div に AJAX しようとしていますが、クリック機能が正しく機能していないようです。if文でバラバラになっているようですが、原因がわかりません。私はアラートでテストしましたが、JSON からのリターンは正常に行われています。初期ロードも正常に機能します。JSON リターンを反復処理し、動作していないように見えるロード関数に URL を返すだけです。

私が実現したい効果は、コンテンツを指す JSON ファイルの .load と 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 に答える