加載文本使用AJAX

Question

我一直在使用改變了我的網站上的照片庫下面的圖片一起：

/*Begin Photo Gallery Code*/ 
    var images = ['g1.jpg', 'g2.jpg', 'g3.jpg', 'g4.jpg']; 

    function loadImage(src) {   
     $('#pic').fadeOut('slow', function() { 
     $(this).html('<img src="' + src + '" />').fadeIn('slow');  

     }); 
    } 

    function goNext() { 
     var next = $('#gallery>img.current').next();    
     if(next.length == 0) 
      next = $('#gallery>img:first'); 

     $('#gallery>img').removeClass('current');   
     next.addClass('current'); 
     loadImage(next.attr('src')); 
    } 

    $(function() { 
     for(var i = 0; i < images.length; i++) { 
      $('#gallery').append('<img src="images/gallery/' + images[i] + '" />');    

     } 


     $('#gallery>img').click(function() { 
      $('#gallery>img').removeClass('current'); 

      loadImage($(this).attr('src')); 
      $(this).addClass('current'); 
     }); 

     loadImage('images/gallery/' + images[0]); 
     $('#gallery>img:first').addClass('current'); 

     setInterval(goNext, 4000); 
    }); 

它加載在一組的四個畫面時一張圖片。另外我有四個html文件，每個文件都與其中一張圖片相關。我想使用JavaScript/JQuery/AJAX加載相關的html文件的內容以及顯示的圖片。有沒有人有一個想法，我可以做到這一點？

我應該把ajax文件（4個html文件）放入JavaScript數組或其他東西嗎？

var ajaxPages=['ajax1.html','ajax2.html','ajax3.html','ajax4.html']; 

在此先感謝。

Answer 1

除非HTML文件在其顯示過程中應該以某種方式更改，否則應該通過服務器端代碼在隱藏的div中用請求輸出它們（或者使用正確的方式）或使用AJAX將它們保存在一個變量或創建隱藏的div s。

首先，你需要兩個數組是這樣的：

var ajaxPages=['ajax1.html','ajax2.html','ajax3.html','ajax4.html'];//File Names 
var divPages=['div1','div2','div3','div4'];//Div ids in order 

爲你應該使用類似的AJAX部分：

var getHtml = function(filename,divid){ 
    $.post('html/'+filename, function(data) { 
    //The first argument is your file location 
    //Second one is the callback, data is the string retrieved        
     $('#'+divid).html(data); 
    }); 
} 

$.each(ajaxPages,function(index,value){ 
    getHtml(value,divPages[index]); 
}); 

應該這樣做......別告訴我，如果你需要進一步說明。

編輯：

var ajaxPages=['ajax1.html','ajax2.html','ajax3.html','ajax4.html']; 
var divId="yourdivid"; 
var textArray=new Array(); 
var currentImg=0; 

var getHtml = function(filename){ 
    $.post('html/'+filename, function(data) {        
     textArray.push(data);//Save data inside the array textArray 
    }); 
} 

$.each(ajaxPages,function(index,value){ 
    getHtml(value,divPages[index]); 
}); 

然後你goNext（）方法：

function goNext() { 
    var next = $('#gallery>img.current').next();    
    if(next.length == 0){ 
     next = $('#gallery>img:first'); 
     currentImg=0; 
    }else{ 
     currentImg++; 
    } 

    $('#gallery>img').removeClass('current');   
    next.addClass('current'); 
    loadImage(next.attr('src')); 

    $('#'+divId).html(textArray[currentImg]);//Adds text to div based on current picture 
} 

這應該是工作的罰款！