Galerie w / jquery, json und prev / next Tasten. Wenn die json Anforderung gibt nicht definiert, die Galerie Pausen

Question

Ich bin ein Anfang Coder, lernten CSS, HTML und JQuery in diesem Sommer in einem Praktikum. Mein Chef will, dass ich eine Galerie zu erstellen, die ein Haupt-Bild hat, und dann zwei Tasten, um den nächsten oder vorherigen Eintrag anzuzeigen. Er will, dass ich Json verwenden, so dass sie leicht hinzufügen und entfernen Bilder. Ich habe es so geschrieben, dass ich mit einer variablen 0 beginnen, dann, wenn ich prev / next klicken dekrementiert / inkrementiert die Variable, und dann an die json geht zurück für das entsprechende Bild zu suchen. Das einzige Problem ist, dass, wenn ich vier Bilder haben, wenn der Wert unter Null oder über 3 geht, es bricht.
Wie kann ich die Jquery sagen, ob die json Lookup undefined zurückgegeben, so dass ich es so oder Schleife haben kann oder die Taste deaktivieren? Ich nehme eine if-Anweisung wäre ideal, aber ich überlasse es Ihnen.

$(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, ich verstehe das Problem jetzt denke ich.

Ich würde das Bild-Swapping-Code in eine Funktion verallgemeinern, dass das aktuelle Bild ein Index angegeben auslagert. Ich habe diese Funktion setImageWithIndex() genannt. Dann können wir umgehen einfach mit dem, was der Index im .click() Code.

Dies erfordert den data in einer anderen globalen, jsonData zu speichern.

Ich würde sparen auch (a) die Anzahl der Bilder in den JSON-Daten zurückgegeben und (b) der aktuelle Bild Index (anfänglich Null) in zwei globalen Variablen.

Hier ist der Code. Ich habe entfernt auch einige Jquery und ersetzt es mit Standard-Javascript, wo es nicht wirklich etwas hinzugefügt hat.

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

Sie typeof verwenden können, für die Rückgabevariablen zu testen geben:

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