jquery - 带 jquery、json 和上一个/下一个按钮的图库。如果 json 请求返回未定义，则画廊中断

Question

我是一名初级编码员，在今年夏天的实习中学习了 CSS、HTML 和 Jquery。我的老板希望我创建一个画廊，其中包含一个主图像，然后有两个按钮来显示下一个或上一个项目。他希望我使用 json，以便他们可以轻松添加和删除图像。我这样写，我从变量 0 开始，然后当我单击上一个/下一个时，它会减少/增加变量，然后返回到 json 来查找相应的图片。唯一的问题是，如果我有四张图片，如果值低于零或高于 3，它就会崩溃。
如何让 jquery 判断 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) 当前图像索引(最初为零)保存在两个全局变量中。

这是代码。我还删除了一些 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);
    });
}