jquery, json 및 이전/다음 버튼이있는 갤러리. json 요청이 undefined를 반환하면 갤러리가 깨집니다.

Question

저는 이번 여름 인턴에서 CSS, HTML 및 Jquery를 배웠습니다. 내 상사는 하나의 주 이미지가있는 갤러리를 만들고 다음 또는 이전 항목을 표시하는 두 개의 단추를 만들어야한다고합니다. 그는 json을 사용하여 이미지를 쉽게 추가하고 제거 할 수 있기를 바랍니다. 나는 변수 0으로 시작한 다음 prev/next를 클릭하면 변수가 감소/증가하고 json으로 돌아가 해당 그림을 찾습니다. 유일한 문제는 네 장의 사진이있는 경우 값이 0 이하 또는 3 이상으로 떨어지면 끊어집니다.
json 조회가 json 조회가 정의되지 않은 상태로 반환되면 어떻게 처리 할 수 ​​있습니까? 그래서 루프를 만들거나 버튼을 비활성화 할 수 있습니까? 나는 if 문이 이상적이라고 생각하지만, 나는 당신에게 맡긴다.

$(document).ready(function(){ 
    $.getJSON("layout.json",function(data){ 

    // Then put the first picture up from the json data... 
     $("<img />").attr({ 
      id: "0-middle_image", 
      class: "middle_image", 
      src: data.items[0].image , 
      }) 
     .appendTo("div#middle_image"); 

    // because I'm starting with the zeroth object, middleimage variable is 0 
     var mi_val = 0 

    // when you click one of the cycle buttons... 
     $("div.cycle_button").click(function(){ 
     //if it is the previous, decrement mi_val, else, increment mi_val 
      if ($(this).attr("id") == "button_prev") 
         {--mi_val;} 
      else {++mi_val;} 
     //then, call the appropriate image object from the json 
      $("img.middle_image").fadeOut(500,function(){ 
       $(this).attr({src: data.items[mi_val].image}) 
       .fadeIn(500); 
       }); 
      }); 
     }); 
    }); 

Answer 1

좋아요, 이제는 제가 생각하기에 문제가 있습니다.

나는 이미지 스와핑 코드를 주어진 인덱스를 가진 현재 이미지를 스왑 아웃하는 함수로 일반화 할 것이다. 나는이 함수를 setImageWithIndex()이라고 불렀다. 그런 다음 색인이 .click() 코드에 포함되어 있는지 간단하게 처리 할 수 ​​있습니다.

이렇게하려면 data을 다른 글로벌 (jsonData)으로 저장해야합니다.

두 글로벌 변수에서 (a) JSON 데이터에 반환 된 이미지 수와 (b) 현재 이미지 인덱스 (초기에는 0)를 저장합니다.

다음은 코드입니다. 또한 jquery 일부를 제거하고 실제로 아무것도 추가하지 않는 표준 javascript로 대체했습니다.

var imageCount; 
var currentImage = 0; 
var jsonData; 

function setImageWithIndex(index) { 
    $("img.middle_image").fadeOut(500, function() { 
     $("img.middle_image") 
      .attr({src: jsonData.items[index].image}) 
      .fadeIn(500); 
    }); 
} 

window.onload = function() { 
    $.getJSON("layout.json", function(data) { 
     jsonData = data; 

     $("<img />").attr({ 
      id: "0-middle_image", 
      class: "middle_image", 
      src: data.items[0].image 
     }) 
     .appendTo("div#middle_image"); 

     /* <PSEUDOCODE class="may not work"> */ 
     imageCount = data.items[0].length; 
     // ie: save the number of images in a global variable 
     /* </PSEUDOCODE> */ 
    } 

    $("div.cycle_button").click(function() { 
     if (this.id == "button_prev") 
      if (currentImage > 0) 
       setImageWithIndex(--currentImage); 
     else 
      if (currentImage < imageCount) 
       setImageWithIndex(++currentImage); 
    }); 
} 

Answer 2

당신은 반환 변수에 대한 테스트 대해서 typeof를 사용할 수

입력 :

$.getJSON("layout.json",function(data){ 
    // check for undefined return value 
    if (typeof data == 'undefined') { 
     // handle your undefined cases 
    } 
});