JavaScript来迭代图像文件夹并将图像添加到无序列表

Question

我想弄清楚为什么这个脚本不会工作。我首先想到这可能是因为div和下面的ul，但它在为ul分配额外的ID之后仍然不起作用。真的需要今晚解决这个问题，所以所有的帮助都非常感谢。

HTML

<div id="Home-Image"> 

    <h1>Images</h1> 
    <ul id="Home-Images"> 
     <li><a href="#"><img src="" width=100 height=100/></a></li> 
     <li><a href="#"><img src="" width=100 height=100/></a></li> 
     <li><a href="#"><img src="" width=100 height=100/></a></li> 
     <li><a href="#"><img src="" width=100 height=100/></a></li> 
     <button id="toggle-two">View more Images</button> 
    </ul> 

的JavaScript

$(document).ready(function() { 
var files = {'jpg':4}; 
var pageName = "d"; 
for (var ext in files){ 
for (var i = 0; i < files[ext]; i++){ 
var src = "../Images/D/allimages" + pageName + "-" + (i+1) + "." + ext;} 
var img = new Image(); 
img.src = src; 
var container = document.getElementById('Home-Images'); 
container.appendChild(img); 
}});  

Answer 1

也许你想这样的事情

$(document).ready(function() { 
    var files = {'jpg':4}, pageName = "d", container = $('#Home-Images'); 
    for (var ext in files) 
    { 
     for (var i = 0; i < files[ext]; i++) 
     { 
      var src = "../Images/D/allimages" + pageName + "-" + (i+1) + "."+ext ; 
      var img = $('<img src="'+src+'" width=100 height=100 />'); 
      container.append($('<li/>').html($('<a/>', {'href':'#'}).html(img))); 
     } 
    } 
}); 

但要确保这条道路http://yourDomain/Images/D/allimagesd-1.jpg适合所有图像。 以下是demo，但图像不可用，但您可以通过浏览器检查工具查看源代码。

Answer 2

修改后的代码：jsfiddle

HTML：

<div id="Home-Image"> 

    <h1>Images</h1> 
    <ul id="Home-Images"> 

     <button id="toggle-two">View more Images</button> 
    </ul>​ 

JS：

$(document).ready(function() { 
    var files = {'jpg':4}; 
    var pageName = "d"; 
    var html = "", src; 
for (var ext in files){ 
    for (var i = 0; i < files[ext]; i++){ 
     src = "../Images/D/allimages" + pageName + "-" + (i+1) + "." + ext; 
     html += '<li><a href="#"><img src="'+ src +'" width=100 height=100/></a></li>'; 

    } 

    $("#Home-Images").prepend(html); 
}}); ​