Question

我正在面对我的JS代码问题，我希望你们可以帮助我帮助我。我想要做的就是循环存储在数组中的5个图像，并将它们发布到我的HTML页面，基本上。

JS：

function functieArray(){
    for (i = 0; i < imgArray.length; i++) {
        imgArray[i];
    }
    document.getElementById("pozeGallery").innerHTML = imgArray.src;
};

var imgArray = new Array();
imgArray[0] = new Image();
imgArray[0].src = 'img/Gallery/poza0.jpg';

imgArray[1] = new Image();
imgArray[1].src = 'img/Gallery/poza1.jpg';

imgArray[2] = new Image();
imgArray[2].src = 'img/Gallery/poza2.jpg';

imgArray[3] = new Image();
imgArray[3].src = 'img/Gallery/poza3.jpg';

imgArray[4] = new Image();
imgArray[4].src = 'img/Gallery/poza4.jpg';

HTML：

<button onclick='functieArray()' class='galleryButons'>Category 1</button>
      <div id='pozeGallery'> </div>

Answer 1

您需要将它们实际附加到DOM才能显示出来。

使用appendChild()方法

在你的情况下：

function functieArray() {
    var gallery = document.getElementById("pozeGallery");
    for (i = 0; i < imgArray.length; i++) {
        gallery.appendChild(imgArray[i]);
    }
};

另请注意，在您的代码示例中，您并未在任何地方调用functieArray，因此可能无效。

Answer 2

要获取Image个对象的HTML，请使用Image#outerHTML。然后你可以循环遍历数组添加到图库的innerHTML。

以下是修复代码的方法（我将使用循环创建Image个对象）：

var imgArray = [];
for (i = 0; i < 5; i++) {
    imgArray[i] = new Image();
    imgArray[i].src = 'img/Gallery/poza' + i + '.jpg';
}

function functieArray() {
    var images = imgArray.map(img => img.outerHTML).join('');
    document.getElementById("pozeGallery").innerHTML = images;
}

<button onclick='functieArray()' class='galleryButons'>Category 1</button>
<div id='pozeGallery'></div>

Answer 3

试试这个;）

＆＃13;

function functieArray() {
    var gallery = document.getElementById("pozeGallery");
    for (i = 0; i < imgArray.length; i++) {
        gallery.appendChild(imgArray[i]);
    }
};
var imgArray = new Array();
imgArray[0] = new Image();
imgArray[0].src = 'img/Gallery/poza0.jpg';

imgArray[1] = new Image();
imgArray[1].src = 'img/Gallery/poza1.jpg';

imgArray[2] = new Image();
imgArray[2].src = 'img/Gallery/poza2.jpg';

imgArray[3] = new Image();
imgArray[3].src = 'img/Gallery/poza3.jpg';

imgArray[4] = new Image();
imgArray[4].src = 'img/Gallery/poza4.jpg';

＆＃13;

<button onclick='functieArray()' class='galleryButons'>Category 1</button>
      <div id='pozeGallery'> </div>

＆＃13;

循环遍历图像数组并将其显示到HTML页面

3 个答案: