元素傳播

Question

vhey大家好，我創建了一個元素populator，它需要某些元素，將它們包裝在html標籤中並將它們附加到一個容器中。我有的問題，如果有的話，更有趣的是每個圖像都要自動輸入。有沒有辦法從文件夾中檢索所有圖像並將它們加載到數組中？

我有這樣的代碼，至極的作品，但手動輸入：

$(window).on('load', function() { 

    var gallery = document.getElementById("grid"); 
    var images = [ 
     "./imgs/galeria/0.jpg", 
     "./imgs/galeria/1.jpg", 
     "./imgs/galeria/2.jpg", 
     "./imgs/galeria/3.jpg", 
     "./imgs/galeria/4.jpg", 
     "./imgs/galeria/7.jpg", 
     "./imgs/galeria/6.jpg", 
     "./imgs/galeria/5.jpg", 
     "./imgs/galeria/8.jpg", 
     "./imgs/galeria/9.jpg", 
     "./imgs/galeria/10.jpg", 
     "./imgs/galeria/11.jpg", 
     "./imgs/galeria/12.jpg", 
     "./imgs/galeria/13.jpg", 
     "./imgs/galeria/14.jpg", 
     "./imgs/galeria/15.jpg", 
     "./imgs/galeria/16.jpg", 
     "./imgs/galeria/17.jpg", 
     "./imgs/galeria/18.jpg", 
     "./imgs/galeria/19.jpg", 
     "./imgs/galeria/20.jpg" 
    ]; 

    for (var i = 0; i < images.length; i++) { 

     var thumbnailWrapper = document.createElement("div"); 

     thumbnailWrapper.className = "thumbnail-wrapper"; 

     var thumbnail = document.createElement("div"); 

     thumbnail.className = "thumbnail"; 

     thumbnail.dataset.source = "./imgs/galeria/" + i + ".jpg"; 

     thumbnailWrapper.appendChild(thumbnail); 

     gallery.appendChild(thumbnailWrapper); 
    } 

    var thumb = document.getElementsByClassName('thumbnail'); 
    // console.log(thumb); 

    for (j = 0; j < images.length; j++) { 
     // $(thumb[j]).attr('src', images[j]); 
     $(thumb[j]).css('background-image', 'url(./imgs/galeria/thumbs/' + j + 'tbm.jpg)'); 
     // console.log(j); 
     // console.log(images[j]); 
    } 

你可以看到腳本在本website我的「GALERIA」一節中提出

編輯動作：或許真的與阿賈克斯？我想保持php等於 編輯2：我想使它與ajax，這是現在正確的代碼

Answer 1

您不能使用客戶端JavaScript掃描服務器上的文件夾。如果你不知道該文件夾包含什麼文件，那麼AJAX本身並不適用。

您必須使用服務器端代碼（例如PHP）來查找文件夾中的所有文件，並將它們以某種方式傳遞給客戶端。這是我看到的唯一途徑。

這種方法可以工作：

$images = glob('imgs/galeria/*.jpg'); 

echo '<div id="grid">'; 

foreach ($images as $key => $image) { 
    echo '<div class="thumbnail-wrapper">'; 
    echo '<div 
    class="thumbnail" 
    data-source="' . $image . '" 
    style="background-image: url(imgs/galeria/thumbs/' . $key . 'tbm.jpg)" 
    ></div>'; 
    echo '</div>'; 
} 

echo '</div>'; 

我希望這就像你的JavaScript代碼一樣。