JSON元素在調用後顯示兩次

Im在顯示一些JSON對象時遇到了一些麻煩。如果使用$.each()顯示對象，則它將在屏幕上顯示兩次。如果我不使用$.each()來顯示對象，那麼它會顯示一次。下面的示例顯示標尺內容將被加載兩次，但文本內容將只加載一次。JSON元素在調用後顯示兩次

JSON文件只被調用一次。我使用Firebug進行了檢查。

使用jQuery 1.8.0，並使用history.js插件林

的JSON文件中使用jsonlint.com進行驗證。

我需要找出爲什麼元素被顯示兩次。任何幫助表示讚賞。感謝

代碼：

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將被執行兩次。

{ 
"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" 
     } 
    } 
}

}

來源

2012-10-02 Navigatron

您可以發佈JSON字符串的示例，以便我們可以看到您正在迭代的內容嗎？此外，我建議升級到1.8.2，它修復了1.8.0中發現的幾個錯誤（如IE9開火。已經太早）。儘管如此，它很可能不會影響您目前的問題。 –

htmlRuler定義在哪裏？ –

你是否在任何地方初始化或重置'htmlRuler'？它現在的樣子是，你總是在每個getJSON調用中向htmlRuler附加文本，然後將所有內容附加到.RulerDiv。再次沒有重置.RulerDiv任何地方。 – Andy

固定

的問題是，我是遍歷數據的兩倍。取出第一個.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-05 13:01:15 Navigatron

試着改變你的下面的代碼：

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

這一個：

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

，因爲在我看來，要附加到相同的變量htmlRuler內沒有清除您之前的內容的.each()循環關合作。

來源

2012-10-05 11:08:03 Nelson

我忘了上面的代碼，然後我把它放回去了。不幸的是這不是問題。謝謝 – Navigatron

你可以請嘗試改變你的代碼與這一個。它對我來說確實很好。

$.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-05 12:06:02 PRP

JSON元素在調用後顯示兩次

回答

相關問題