2

我是一名初学者，今年夏天在实习中学习了 CSS、HTML 和 Jquery。我的老板希望我创建一个具有一个主图像的画廊，然后是两个按钮来显示下一个或上一个项目。他希望我使用 json，以便他们可以轻松地添加和删除图像。我已经这样写了，我从变量 0 开始，然后当我单击 prev/next 时，它会递减/递增变量，然后返回 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);
                });
            });
        }); 
    });
4

2 回答 2

2

好的，我现在想明白了这个问题。

我会将图像交换代码概括为一个函数，该函数在给定索引的情况下交换当前图像。我已经调用了这个函数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);
    });
}
于 2009-11-01T20:54:22.457 回答
0

您可以使用 typeof 来测试返回变量的类型：

$.getJSON("layout.json",function(data){
    // check for undefined return value
    if (typeof data == 'undefined') {
        // handle your undefined cases
    }
});
于 2009-11-01T21:21:52.277 回答