用JSON數據點擊加載環球免稅店圖庫。我需要新鮮的眼睛看我的錯誤

Question

我的腳本可以被細分爲三個部分：

1. 事件處理程序來捕獲點擊菜單項的ID。這是圖庫名稱，它告訴腳本在哪裏可以找到特定圖庫的圖像和xml文件。
2. 從xml中提取圖像信息並將其轉換爲可用的JSON的功能。
3. 將JSON加載到環球免稅店。

JSON不會變成Galleria，或者我沒有正確加載它。不幸的是，對JS來說，我太新了，以至於在調試時非常有效。我覺得我在這個相當深的水中。

該網站爲http://willowbrook.businesscatalyst.com/showcase。

這是我的腳本。我正在使用最新的jQuery和xml2json插件。

$(document).ready(function() { 

var firstGallery   = 'kitchens'; 
var galleriaNavID   = '#showcasenav'; 
var galleriaID   = '#showcaseitems'; 
var selectedClass   = 'selected'; 
var imageFolder   = '/images/showcase/'; // Don't forget the/(forward slash) before and after 
var xmlFileName   = 'PhotoGallery.xml'; 
var selectedNavElement = galleriaNavID+' .'+selectedClass; 
var galleryName   = $(selectedNavElement).attr('id'); 

if(galleryName == null) { 
    galleryName = firstGallery; 
    $('#'+firstGallery).click(); 
}; 

function loadGalleria() { 
    function GalleriaBCtoJson() { // Convert PhotoGallery XML to JSON and load dynamically into Galleria 

     var data = new Array; 

     $.get(imageFolder+galleryName+'/'+xmlFileName, function(xml){ 
      var i; 
      var imgArray = $.xml2json(xml).album.img; 
      for(i in imgArray) { 
       data.push({ image: imageFolder+galleryName+'/'+imgArray[i].src }); 
      }; 
     }); 
     return data; 
    }; 

    var data = GalleriaBCtoJson(); 

    if ($(galleriaID).data('galleria')) { // If Galleria has already been initialized, 
     $(galleriaID).data('galleria').load(data); // load galleria with the new data 
    } 
    else { // Call Galleria, set options, 
     $(galleriaID).galleria({  
      dataSource: data, // and add the data as dataSource 
      image_crop: true, 
      carousel: true, 
      carousel_speed: 2000, 
      autoplay: 5000, 
      thumbnails: true, 
      showInfo: false, 
      transition: 'fade', 
      transition_speed: 600, 
      lightbox: true, 
      easing: 'galleriaIn', 
      pauseOnInteraction: false, 
      debug: false 
     }); 
    } 
}; 


$(galleriaNavID+' a').click(function(e) { // attach event handler to the menu 
    e.preventDefault(); 

    $(selectedNavElement).removeClass(selectedClass); // toggle selected class 
    $(this).addClass(selectedClass); 

    galleryName = $(this).attr('id'); 
    loadGalleria(); 
}); 

}）;

這是我使用建議完成的解決方案。這完美的作品：

  galleria : function(){ 
      $(document).ready(function() { 

       var firstGallery  = 'kitchens'; 
       var galleriaNavID  = '#showcasenav'; 
       var galleriaID   = '#showcaseitems'; 
       var selectedClass  = 'selected'; 
       var imageFolder   = '/images/showcase/'; // Don't forget the/(forward slash) before and after 
       var xmlFileName   = 'PhotoGallery.xml'; 
       var selectedNavElement = galleriaNavID+' .'+selectedClass; 
       var galleryName   = $(selectedNavElement).attr('id'); 

       if(galleryName == null) { 
        galleryName = firstGallery; 
       }; 

       function loadGalleria() { 
        function GalleriaBCtoJson(callback) { // Convert PhotoGallery XML to JSON and load dynamically into Galleria 

         var data = []; 

         $.get(imageFolder+galleryName+'/'+xmlFileName, function(xml){ 
          var i; 
          var imgArray = $.xml2json(xml).album.img; 
          for(i in imgArray) { 
           data.push({ image: imageFolder+galleryName+'/'+imgArray[i].src }); 
          }; 
          callback(data); 
         }); 
        }; 

        var data = GalleriaBCtoJson(function(data) { 
         if ($(galleriaID).data('galleria')) { // If Galleria has already been initialized, 
          $(galleriaID).data('galleria').load(data); // load galleria with the new data 
         } 
         else { // Call Galleria, set options, 
          $(galleriaID).galleria({  
           dataSource: data, // and add the data as dataSource 
           image_crop: true, 
           carousel: true, 
           carousel_speed: 2000, 
           autoplay: 5000, 
           thumbnails: true, 
           showInfo: false, 
           transition: 'fade', 
           transition_speed: 600, 
           lightbox: true, 
           easing: 'galleriaIn', 
           pauseOnInteraction: false, 
           debug: false 
          }); 
         } 
        }); 
       }; 


       $(galleriaNavID+' a').click(function(e) { // attach event handler to the menu 
        e.preventDefault(); 

        $(selectedNavElement).removeClass(selectedClass); // toggle selected class 
        $(this).addClass(selectedClass); 

        galleryName = $(this).attr('id'); 
        loadGalleria(); 
       }); 

       $('#'+firstGallery).click(); 
      }); 
     } 

只要記住把xml2json和廣場插件的頭。他們可以在這裏找到：http://www.fyneworks.com/jquery/xml-to-json/#tab-Download

和http://galleria.io/

Answer 1

我不知道究竟的問題是什麼，但是當你這樣做：

var data = GalleriaBCtoJson(); 

...你會得到一個空數組，因爲$.get回調尚未被調用。該函數返回data，但由於它在ajax完成之前返回，因此它是空的。你可以用一個簡單的控制檯來確認。

你需要做的是這樣的：

GalleriaBCtoJson(function(data) { 
    // continue using data 
}); 

而且GalleriaBCtoJson：

function GalleriaBCtoJson(callback) { 
    var data = []; 
    $.get(url, function(xml){ 
     // loop and insert into data here 
     callback(data); 
    }); 
}