Галерея с кнопками jquery, json и prev / next. Если запрос json возвращает неопределенное значение, галерея прерывается - PullRequest
Новая
       6

Галерея с кнопками jquery, json и prev / next. Если запрос json возвращает неопределенное значение, галерея прерывается

2 голосов
/ 01 ноября 2009

Этим летом я начинающий программист, изучил 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);
                });
            });
        }); 
    });

Ответы [ 2 ]

2 голосов
/ 01 ноября 2009

ОК, теперь я понимаю проблему.

Я бы обобщил код обмена изображениями в функцию, которая заменяет текущее изображение по индексу. Я назвал эту функцию setImageWithIndex(). Тогда мы можем просто разобраться с индексом в коде .click().

Для этого требуется сохранить data в другом глобальном, jsonData.

Я бы также сохранил (а) количество изображений, возвращаемых в данных JSON, и (б) текущий индекс изображения (изначально нулевой) в двух глобальных переменных.

Вот код. Я также удалил некоторые 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);
    });
}
0 голосов
/ 02 ноября 2009

Вы можете использовать typeof для проверки типа возвращаемых переменных: 

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