Question

我想显示一些我存储在文件夹中的图像（* .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>

Answer 1

您需要将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);
        }
}

Answer 2

要在getImage - 功能中显示图像，您可以简单地编写<img> - 标记

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

或者你可以像@Frederik建议的那样做，但这需要你写'核心'javascript。

Answer 3

如果员工人数不同，那么您可能希望列表元素的数量可变。您可以通过创建一个空的无序列表<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循环中的变量声明，以便重用这些变量，而不是在每次迭代时重新声明。

如何使用功能显示图像？

3 个答案: