Question

我有一个带有一些图像的html文件。但是现在我想将图像从我的JavaScript文件（代码如下所示）加载到html文件div类中，而不必始终将其键入到div类中。有没有办法用JavaScript，JSON或其他方式实现这一目标？

var swiperExhibitors = ['141726', '141747', '141786', '144994', '145002', '145070', '145072', '151550', '168999', '233192', '545600'];

var swiperImages = ['1437645467.1063_3_o.jpg', '1432890452.7057_3_o.jpg', '1538377347.3443_114_o.jpg', '1495453007.7039_3_o.jpg', '1433941431.3552_3_o.jpg', '1491818250.7553_3_o.jpg', '1364303014.8606_3_o.jpg', 'fa71eb9a8367a0ec85c7b6c05a05b6ef_01_07_o.jpg', '1474012701.9219_3_o.jpg', '1546596386.5453_145_o.jpg', '1554193616.0853_145_o.jpg'];

我想编写一个脚本，为我做所有工作，并在我的html文件中动态创建图像

Answer 1

这将使您可以动态创建图像-reference

var swiperImages = ['1437645467.1063_3_o.jpg', '1432890452.7057_3_o.jpg', '1538377347.3443_114_o.jpg', '1495453007.7039_3_o.jpg', '1433941431.3552_3_o.jpg', '1491818250.7553_3_o.jpg', '1364303014.8606_3_o.jpg', 'fa71eb9a8367a0ec85c7b6c05a05b6ef_01_07_o.jpg', '1474012701.9219_3_o.jpg', '1546596386.5453_145_o.jpg', '1554193616.0853_145_o.jpg'];

function myFunction(src) {
  var x = document.createElement("IMG");
  x.setAttribute("src", src);
  x.setAttribute("width", "304");
  x.setAttribute("height", "228");
  x.setAttribute("alt", "The Pulpit Rock");
  document.body.appendChild(x);
}


swiperImages.forEach(el => {
 myFunction(el)

})

Answer 2

您可以通过简单地遍历swiperImages

var swiperExhibitors = ['141726', '141747', '141786', '144994', '145002', '145070', '145072', '151550', '168999', '233192', '545600'];

var swiperImages = ['1437645467.1063_3_o.jpg', '1432890452.7057_3_o.jpg', '1538377347.3443_114_o.jpg', '1495453007.7039_3_o.jpg', '1433941431.3552_3_o.jpg', '1491818250.7553_3_o.jpg', '1364303014.8606_3_o.jpg', 'fa71eb9a8367a0ec85c7b6c05a05b6ef_01_07_o.jpg', '1474012701.9219_3_o.jpg', '1546596386.5453_145_o.jpg', '1554193616.0853_145_o.jpg'];

swiperImages.forEach((name, i) => {
  var id = swiperExhibitors[i];
  var div = document.createElement("div")
  div.className = "swiper-slide";
  document.querySelector(".swipper-wrapper").appendChild(div)
  var a = document.createElement("a");
  a.href = "egcf-link://dbf?id=" + id;
  div.appendChild(a);
  var img = document.createElement("img");
  img.src = name
  a.appendChild(img)
})

<div class="swipper-wrapper"></div>

您还可以在小提琴https://jsfiddle.net/mknf3d45/3/

中看到

Answer 3

要动态加载html中的图像，您可以尝试：

<html>
<div id="test">
</div>
</html>
<script>
$(document).ready(function(){
    for(var i=0;i<swiperExhibitors.length;i++){
        var ele = document.createElement("img");
        ele.setAttribute("src",swiperExhibitors[i]);
        test.appendChild(ele);
    }
});
</script>

Answer 4

如果您使用的是Jquery，则可以这样做。

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="jquery-3.4.0.min.js"></script>
</head>
<body>

<div class="swiper-slide"></div>

</body>
</html>

<script>
var image = [{imgId: '141726', img: '1437645467.1063_3_o.jpg'}
          ,{imgId: '141747', img:'1432890452.7057_3_o.jpg'}
          ,{imgId: '141786', img: '1538377347.3443_114_o.jpg'}
          ,{imgId: '144994', img: '1495453007.7039_3_o.jpg'}
          ,{imgId: '145002', img: '1433941431.3552_3_o.jpg'}
          ,{imgId: '145070', img: '1491818250.7553_3_o.jpg'}
          ,{imgId: '145072', img: '1364303014.8606_3_o.jpg'}
          ,{imgId: '151550', img: 'fa71eb9a8367a0ec85c7b6c05a05b6ef_01_07_o.jpg'}
          ,{imgId: '168999', img: '1474012701.9219_3_o.jpg'}
          ,{imgId: '233192', img: '1546596386.5453_145_o.jpg'}
          ,{imgId: '545600', img: '1554193616.0853_145_o.jpg'}]

$(document).ready(function(){
    $.each(image, function( key, obj ) {
        $( ".swiper-slide" ).append( `<a href="egcf-link://dbf?imgId=${obj.imgId}"><img src="../img/swiper/${obj.img}"/></a>`);

    });
});
</script>

仅当您的JQuery文件位于文件夹的根目录中并且所有图像都位于根目录中时，这才起作用

这是结果

<html><head>
<title>Test</title>
<script src="jquery-3.4.0.min.js"></script>
</head>
<body>

    <div class="swiper-slide">
        <a href="egcf-link://dbf?imgId=141726"><img src="../img/swiper/1437645467.1063_3_o.jpg"></a>
        <a href="egcf-link://dbf?imgId=141747"><img src="../img/swiper/1432890452.7057_3_o.jpg"></a>
        <a href="egcf-link://dbf?imgId=141786"><img src="../img/swiper/1538377347.3443_114_o.jpg"></a>
        <a href="egcf-link://dbf?imgId=144994"><img src="../img/swiper/1495453007.7039_3_o.jpg"></a>
        <a href="egcf-link://dbf?imgId=145002"><img src="../img/swiper/1433941431.3552_3_o.jpg"></a>
        <a href="egcf-link://dbf?imgId=145070"><img src="../img/swiper/1491818250.7553_3_o.jpg"></a>
        <a href="egcf-link://dbf?imgId=145072"><img src="../img/swiper/1364303014.8606_3_o.jpg"></a>
        <a href="egcf-link://dbf?imgId=151550"><img src="../img/swiper/fa71eb9a8367a0ec85c7b6c05a05b6ef_01_07_o.jpg"></a>
        <a href="egcf-link://dbf?imgId=168999"><img src="../img/swiper/1474012701.9219_3_o.jpg"></a>
        <a href="egcf-link://dbf?imgId=233192"><img src="../img/swiper/1546596386.5453_145_o.jpg"></a>
        <a href="egcf-link://dbf?imgId=545600"><img src="../img/swiper/1554193616.0853_145_o.jpg"></a>
    </div>


<script>
var image = [{imgId: '141726', img: '1437645467.1063_3_o.jpg'}
          ,{imgId: '141747', img:'1432890452.7057_3_o.jpg'}
          ,{imgId: '141786', img: '1538377347.3443_114_o.jpg'}
          ,{imgId: '144994', img: '1495453007.7039_3_o.jpg'}
          ,{imgId: '145002', img: '1433941431.3552_3_o.jpg'}
          ,{imgId: '145070', img: '1491818250.7553_3_o.jpg'}
          ,{imgId: '145072', img: '1364303014.8606_3_o.jpg'}
          ,{imgId: '151550', img: 'fa71eb9a8367a0ec85c7b6c05a05b6ef_01_07_o.jpg'}
          ,{imgId: '168999', img: '1474012701.9219_3_o.jpg'}
          ,{imgId: '233192', img: '1546596386.5453_145_o.jpg'}
          ,{imgId: '545600', img: '1554193616.0853_145_o.jpg'}]

$(document).ready(function(){
    $.each(image, function( key, obj ) {
        console.log('obj:   ' + obj);
        console.log('obj.imgId: ' + obj.imgId);
        console.log('obj.img:   ' + obj.img);

        $( ".swiper-slide" ).append( `<a href="egcf-link://dbf?imgId=${obj.imgId}"><img src="../img/swiper/${obj.img}"/></a>`);

    });
});
</script>

</body>
</html>

Answer 5

您可以循环播放。

var i; for (i = 0; i < swiperImages.length; ++i) { // do something with swiperImages[i] like appending image }

是否可以从js文件中的html文件中动态加载图像？

5 个答案: