호출 후 JSON 요소가 두 번 표시됩니다.

Question

일부 JSON 개체 표시에 문제가 있습니다. 객체가 $.each()을 사용하여 표시되면 화면에 두 번 표시됩니다. 개체를 표시하려면 $.each()을 사용하지 않으면 한 번 표시됩니다. 아래 예제는 눈금자 내용이 두 번로드되지만 텍스트 내용은 한 번만로드된다는 것을 보여줍니다.

JSON 파일은 한 번만 호출됩니다. 나는 방화범이 끌 렸던 것을 사용하여 이것을 조사했다.

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

}

Answer 1

고정

문제는 그 두 배의 데이터를 반복 한 것이 었습니다. 첫 번째 코드 인 .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'); 

Answer 2

당신의 다음 코드를 변경해보십시오 :이 하나

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

을 :

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

을 당신이 내 같은 변수 htmlRuler에 추가하는 나에게 것 때문에 .each() 이전 내용의 내용을 지우지 않고 루프합니다. eration.

Answer 3

이 코드로 코드를 변경하십시오. 그것은 나를 위해 좋아 보인다.

$.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'); 
     });