Javascript 库，使用“for”循环添加图像答案

【问题标题】：Javascript gallery, adding images with "for" loopJavascript 库，使用“for”循环添加图像
【发布时间】：2017-03-28 14:32:40
【问题描述】：

我正在我的项目中创建图库，但我不想发送垃圾邮件清除 html 并在我的代码中重复 20 次。我想在 javascript 中创建循环以从我的文件夹中获取图像的数量，然后将其添加到一个 div 中。我已经创建了代码，但我不知道如何执行它。代码：

function addingImages() {

    for (var i = 0; i <= ***; i++) {
        var image = document.createElement("img");
        image.setAttribute("src", "images/1.jpg");
        document.querySelector(".gallery").appendChild(image);
    }
}

*** - 我不知道应该有什么。我知道我需要变量来增加以后的图像数量，如 1.jpg、2.jpg、3.jpg 等。

【问题讨论】：

标签： javascript jquery html gallery

【解决方案1】：

您需要从 1 循环到 20，因此将循环计数设置为 20。然后在 setAttribute 函数中使用循环中的索引，如下所示：

   function addingImages() {
    for (var i = 1; i <= 20; i++) {
        var image = document.createElement("img");
        image.setAttribute("src", "images/" + i + ".jpg");
        document.querySelector(".gallery").appendChild(image);
   }
}

【讨论】：

那行得通，是的，实际上我一直在考虑它，但这不是我想要的方式。我需要动态代码。我的意思是，在两个月后，我想将图像添加到我的文件夹中，而不是更改代码中的数字。你知道我的意思是什么吗？？ i
好吧，这仅靠 JavaScript 是不可能的。您需要创建一个计算图像的服务器方法并通过 javascript ajax 调用调用该方法。然后获取结果并循环所需的迭代次数。
我觉得我的问题很棘手，这不能仅在纯 js 中完成。好的，但至少我现在知道 :) 我很高兴它确实有效，我需要记住在添加一些图像时总是更改我的迭代器。谢谢你的帮助！

【解决方案2】：

有了 Jquery，你也可以这样使用：

function addImages(img_count) {
   var images='';
   for (var i = 1; i <= img_count; i++) {
    image = '<img src="images/'+i+'.jpg">';
   }
   $(".gallery").html(image);
}

【讨论】：

【解决方案3】：

您需要添加此 jquery(Ajax) 函数而不是 for 循环，因为您需要先检查文件夹中的图像，然后再将其包含在图库中 $.ajax({ 网址：“图片/”，成功：函数（数据）{ $(data).find("a:contains(.jpg)").each(function(){ var 文件名 = this.href.replace(window.location.host, "").replace("http://", ""); $("画廊").append(""); }); } });

【讨论】：