javascript - 如何动态加载照片到动态加载的div?

标签 javascript jquery ajax

我写了这段代码,它根据本地目录中文本文件的数量创建 div。

然后我尝试编写额外的代码,将照片附加到每个 div。不幸的是,此代码不附加任何照片...

function liGenerator() {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (xmlhttp.readyState == XMLHttpRequest.DONE) {
        if (xmlhttp.status == 200) {
          var n = (xmlhttp.responseText.match(/txt/g) || []).length;
          for (var i = 1; i < n; i++) {
            $.get("projects/txt/"+i+".txt", function(data) {
              var line = data.split('\n');
              var num = line[0]-"\n";
              var clss = line[1];
              var title = line[2];
              var price = line[3];
              var content = line[4];
              $("#list-portfolio").append("<li class='item "+clss+" show' onclick='productSelection(&#39;"+num+"&#39;)'><img src='projects/src/"+num+"/title.jpg'/><div class='title'><h1>"+title+"</h1><h2>"+price+"</h2></div><article>"+content+"</article></li>");
              $("#full-size-articles").append("<li class='product "+num+"'><div><div class='photo_gallery'><div id='fsa_img "+num+"'><div width='100%' class='firstgalleryitem'></div></div></div><article class='content'><h1 class='header_article'>"+title+"</h1><h2 class='price_article'>"+price+"</h2><section class='section_article'>"+content+"</section></article></div></li>");
          });
        }
      }
    }
  };
  xmlhttp.open("GET", "projects/txt/", true);
  xmlhttp.send();
}   

function pushPhotos() {
  var list = document.getElementById("full-size-articles").getElementsByTagName("li");
  var amount = list.length;
  for(var i=1;i<=amount;i++) {
    var divID = "#fsa_img "+i;
    var where = "projects/src/"+i+"/";
    var fx = ".jpg";
    loadPhotos(where, fx, divID);
  }
}

function loadPhotos(dir, fileextension, div) {
  $.ajax({
    url: dir,
    success: function (data) {
      $(data).find("a:contains(" + fileextension + ")").each(function () {
        var filename = this.href.replace(window.location, "").replace("http://", "");
        $(div).append("<img src='"+dir+filename+"' class='mini_photo'/>");
      });
    }
  });
}

关于为什么这段代码没有按预期工作有什么想法吗?

最佳答案

主要问题是“#fsa_img”和“i”之间的空格。当我将其更改为 '"#fsa_img_"+i' 时,代码开始按预期工作。

关于javascript - 如何动态加载照片到动态加载的div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54722383/

相关文章:

javascript - Object.create,JSON.stringify 对象时不正确

asp.net - jQuery 与 ASP.NET WebForms - 禁用文本框

javascript - 通过 AJAX 加载 Google Maps API,控制台错误

javascript - 如何将来自多个 AJAX 请求的数据使用到不同的函数中或创建要全局使用的值数组

javascript - 如何检测 salesforce lightning 应用程序是在移动浏览器还是桌面浏览器上运行?

javascript - 如何添加框着色器来绘制 Highcharts

javascript - 子网格未填充在免费的 jqGrid 中

jquery ajax调用被codeigniter 3 csrf禁止

javascript - d3.js 树节点布局删除根节点

javascript - .each 不在 jquery 中工作