javascript - 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

修改代码：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 );
}}); ​

Answer 2

也许你想要这样的东西

$(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适用于所有图像。这是一个演示，但图像不可用，但您可以通过浏览器检查工具查看源代码。