Galerie avec les boutons jquery, json et prev/next. Si la requête json renvoie undefined, la galerie se casse

Question

Je suis un codeur débutant, j'ai appris CSS, HTML et Jquery dans un stage cet été. Mon patron veut que je crée une galerie qui a une image principale, puis deux boutons pour afficher l'élément suivant ou précédent. Il veut que j'utilise json, afin qu'ils puissent facilement ajouter et supprimer des images. Je l'ai écrit de telle sorte que, je commence par une variable 0, puis quand je clique sur prev/next, il décrémente/incrémente la variable, puis retourne à la json pour chercher l'image correspondante. Le seul problème est que si j'ai quatre images, si la valeur passe en dessous de zéro ou au-dessus de 3, ça casse.
Comment puis-je avoir le jquery dire si la recherche json retourné indéfini, de sorte que je peux l'avoir en boucle ou désactiver le bouton? Je suppose qu'une déclaration if serait idéale, mais je vous laisse le soin de le faire.

$(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

OK, je comprends le problème maintenant je pense.

Je voudrais généraliser le code de permutation d'image dans une fonction qui permute l'image actuelle en fonction d'un index. J'ai appelé cette fonction setImageWithIndex(). Ensuite, nous pouvons traiter simplement avec ce que l'index est dans le code .click().

Cela nécessite d'enregistrer le data dans un autre global, jsonData.

Je voudrais également enregistrer (a) le nombre d'images retournées dans les données JSON et (b) l'indice d'image actuel (initialement zéro) dans deux variables globales.

Voici le code. J'ai également enlevé quelques jquery et l'ai remplacé avec le javascript standard où il n'ajoute vraiment rien.

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

Vous pouvez utiliser typeof pour tester les variables de retour type:

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