1

一部の JSON オブジェクトの表示に問題があります。thenを使用してオブジェクトを表示する$.each()と、画面に 2 回表示されます。$.each()オブジェクトを表示するために使用しない場合、一度表示されます。以下の例は、ルーラー コンテンツが 2 回読み込まれることを示していますが、テキスト コンテンツは 1 回だけ読み込まれます。

JSON ファイルは 1 回だけ呼び出されます。Firebugを使用してこれを確認しました。

jQuery 1.8.0を使用し、history.jsプラグインを使用しています

JSON ファイルは、jsonlint.com を使用して検証されます。

要素が 2 回表示されている理由を調べる必要があります。どんな助けでも大歓迎です。ありがとう

コード：

function JSONLoader(page)
{
    //The page is "about" page then..
    if(page == 'about')
    {

        $.getJSON('about.json', function(data, textStatus){
            var htmlRuler="";
            $.each(data.person, function(pageIndex, page){  

                //The ruler content will load in twice
                if(page.RulerDiv){
                    htmlRuler += '<ul>';
                    $.each(page.RulerDiv,function(rulerIndex, ruler){
                        htmlRuler += '<li><img class="'+ruler.imgClass+'" src="'+ruler.imgURI+'" alt="'+ruler.imgAlt+'" title="'+ruler.imgTitle+'"/></li>';                         
                    });
                    htmlRuler += '</ul>';
                }                       
                $('.RulerDiv').append(htmlRuler).fadeIn('slow');

                //This loads the text in once only.
                if(page.TextDiv){
                    var htmltext = '<p class="' + page.TextDiv.textClass+'">'+ page.TextDiv.Text + '</p>';      
                }
                $('.TextDiv').append(htmltext).fadeIn('slow');
            });
        });
    }
}

このためのサンプル JSON。配列 RulerDiv は 2 回実装されます。

{
"person": {
    "page": {
        "RulerDiv": [
                {
                    "imgURI": "../img/rulerButton.png",
                    "imgTitle": "",
                    "imgClass": "hover whoRulerDivImg",
                    "imgAlt" : ""
                },
                {
                    "imgURI": "../img/rulerButton2.png",
                    "imgTitle": "",
                    "imgClass": "hover RulerDivImg",
                    "imgAlt" : ""
                }
            ],
        "TextDiv": {
            "wText" : "He is alive",
            "textClass" : "fontClass"
        }
    }
}

}

4

3 に答える 3

4

次のコードを変更してみてください。

if(page.RulerDiv){
   htmlRuler += '<ul>';

これのために：

htmlRuler = '';
if(page.RulerDiv){
   htmlRuler += '<ul>';

前の反復から内容をクリアせずに、ループhtmlRuler内の同じ変数に追加しているように見えるためです。.each()

于 2012-10-05T11:08:03.700 に答える
3

修繕

問題は、データを 2 回反復していたことです。最初のものを取り出して.each()、コードを以下のコードに変更すると、このバグが修正されます。

$.getJSON('about.json', function(data, textStatus){
            var htmlRuler="";  

            if(data.person.page.RulerDiv){
                htmlRuler += '<ul>';
                $.each(data.person.page.RulerDiv,function(rulerIndex, ruler){
                    htmlRuler += '<li><img class="'+ruler.imgClass+'" src="'+ruler.imgURI+'" alt="'+ruler.imgAlt+'" title="'+ruler.imgTitle+'"/></li>';                         
                });
                htmlRuler += '</ul>';
            }                       
            $('.RulerDiv').append(htmlRuler).fadeIn('slow');
于 2012-10-05T13:01:15.767 に答える
1

これでコードを変更してみてください。それは私には良さそうです。

$.each(data.person, function(pageIndex, page){  
   // try to change these only and see        
    var htmlRuler = "";
             if(page.RulerDiv){
                htmlRuler = $('<ul>').clone();
                $.each(page.RulerDiv,function(rulerIndex, ruler){
                    var imgDom = $('<img>').clone(); 
                var liDom = $('<li>').clone();
                    $('<img>').addClass(ruler.imgClass).attr({'src':ruler.imgURI,'alt':ruler.imgAlt,'title':ruler.imgTitle})
                              .appendTo($('<li>').appendTo(htmlRuler));
                });
            }                       
            $('.RulerDiv').append(htmlRuler).fadeIn('slow');

            //This loads the text in once only.
            if(page.TextDiv){
                var htmltext = '<p class="' + page.TextDiv.textClass+'">'+ page.TextDiv.Text + '</p>';      
            }
            $('.TextDiv').append(htmltext).fadeIn('slow');
        });
于 2012-10-05T12:06:02.080 に答える