0

我想显示一些存储在文件夹中的图像 (*.jpg)。我想使用函数显示这些图像。为此，我创建了一个由对象组成的数组，每个对象都包含一个我在函数中使用的 id。这是代码： 

//employee array
var employees =[{
    name:"jacob",
    age :23,
    city:"Boston",
    yoe :12,
    image :'d.jpg',
    id : 1
    },
    {
    name:"aaron",
    age :21,
    city:"Nevada",
    yoe :12,
    image :'b.jpg',
    id : 2
    },
    ...   
}];

我正在使用员工id- 这是图像的名称 - 来显示图像。以下是图像的功能：

function getimages(){
    for(var i = 1;i <= employees.length;i++){
        document.getElementById("list + i").innerHTML = employees[i].id+".jpg";
    }
}
getimages(); // to get the images

这是我要显示这些图像的 HTML 部分：

<ul>
    <li id="list1">A</li>
    <li id="list2">B</li>
    <li id="list3">C</li>
    <p>123213</p>
</ul>
4

3 回答 3

2

您将需要替换document.getElementById("list + i")为document.getElementById("list" + i).

有时，动态创建 DOM 元素并附加它们可能是值得的，因为您永远不知道何时需要更新这些新元素。你可能有这样的事情：

function getimages(){
        for(var i = 1;i <= employees.length;i++) {
             var elem=document.getElementById("list"+i);
             var imagePath=employees[i].id+".jpg";

             // append text
             elem.appendChild( document.createTextNode(imagePath) );

             // append image
             var img = document.createElement("img");
             img.src = imagePath;
             elem.appendChild(img);
        }
}
于 2013-04-25T07:45:23.383 回答
0

要在 -function 中显示图像getImage，您可以简单地编写<img>-tag

document.getElementById("list" + i).innerHTML = '<img src="' +  employees[i].id + '.jpg" />';

或者您可以按照@Frederik 的建议进行操作，但这需要您编写“核心”javascript。

于 2013-04-25T07:44:57.463 回答
0

如果员工人数不同，那么您可能希望使列表元素的数量可变。您可以通过创建一个空的无序列表<ul id="employees"></ul>然后更改 getImages 函数来做到这一点：

function getImages(){ 
    for(var i = 1, img, li; i <= employees.length; i++) { 

        // create image and set image source
        img = document.createElement("img"); img.src = employee[i].image; 

        // create list item, set ID and attach previously created image
        li = document.createElement("li"); li.id = "list"+i; li.appendChild(img); 

        // attach list item to unordered list of employees
        document.getElementById("employees").appendChild(li);
    }
}

现在您可以拥有任意数量的员工，并且他们都有自己的列表 ID。我还更改了 for 循环中的变量声明，以便重复使用变量，而不是在每次迭代时重新声明。

于 2013-04-25T08:36:10.680 回答