Question

基本上，我有一个带有两个文本字段的简单网页，以及一个从计算机中选择图像的按钮。我需要做的是，为用户选择一张照片，填写“艺术家”和“文本”字段，然后按“添加图像”按钮。然后，应将所有三个项目添加到数组中，并在div中显示图像，并在“ li”列表中显示文本。

目前，图像有效，并且在按下按钮时将显示在屏幕上，文本似乎被推入数组中，但是无论我做什么，我都无法在屏幕上显示文本网页。如果将数组变成对象，我也无法显示图像，这就是为什么我将推动文本拆分为一个单独的函数的原因。

无论哪种方式，无论哪种方式，它都会中断图像显示或中断文本显示。我无法在页面上同时显示两者。我试图做到这一点，以便每当添加新的图像和文本时，它们都会依次显示如下：

[专辑封面]

[文本]

[专辑封面]

[文本]

随着您继续添加更多内容，这将在屏幕上继续显示。有人可以告诉我我要怎么做。谢谢。

var info = {
    myImages: [],

    addImage: function(imageBlob) {
        this.myImages.push(imageBlob);
    },

    addInfo: function(artist, title) {
        this.myImages.push({
            artist: artist, 
            title: title
            });
    },


    redrawImages: function() {
        var divForImages = document.getElementById('myImages');
        divForImages.innerHTML = '';
        this.myImages.forEach((imageBlob) => {
            var img = document.createElement('img');
            img.style.width = "200px";
            img.style.height = "200px";
            img.src = URL.createObjectURL(imageBlob);
            divForImages.appendChild(img);
        });

    },

    redrawInfo: function() {
        var ul = document.querySelector('ul');
        this.myImages.forEach(function (item) {
            let li = document.createElement('li');
            ul.appendChild(li);
            li.innerHTML += item;
        });
    }


}

var handlers = {
    addImageAndRedraw: function() {
        var fileInput = document.getElementById('fileInput');
        var artistField = document.getElementById('artistField');
        var titleField = document.getElementById('titleField');

        if (fileInput.files.length === 1) {
            info.addImage(fileInput.files[0]);
            info.addInfo(artistField.value, titleField.value);
            info.redrawImages();
            info.redrawInfo();
        }
    }
}

var button = document.getElementById('button');
button.addEventListener('click', handlers.addImageAndRedraw);

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <h1>My images</h1>
    <input id="fileInput" type="file" accept="image/*" multiple="false" value="Select image">
    <input id="button" type="button" value="Add image and redraw">

    <div>
        <input id="artistField" type="text" placeholder="artist">
        <input id="titleField" type="text" placeholder="title">
    </div>

    <hr>
    <div id="myImages">
    </div>


    <ul></ul>

    <script src="album.js"></script>
  </body>
</html>

Answer 1

您要将信息添加到与图像相同的数组中，因此最终将像[image，info，image，info]等。您最好添加一个既包含图像又包含对象的对象。 info，然后在将内容添加到页面时将其视为单个对象，而不是在单独的函数中添加图像和文本。另外，您不会清除信息列表，因此它会成倍增长。

在调整了我上面提到的位之后，这是一个修改后的示例...

var info = {
myInfo: [],

add: function(imageBlob, artist, title) {
    this.myInfo.push({
        image: imageBlob,
        artist: artist,
        title: title
    });
},

redraw: function() {
    var divForImages = document.getElementById('myImages');

    divForImages.innerHTML = '';

    var ul = document.querySelector('ul');
    ul.innerHTML = "";

    this.myInfo.forEach((info) => {
        var img = document.createElement('img');
        img.style.width = "200px";
        img.style.height = "200px";
        img.src = URL.createObjectURL(info.image);
        divForImages.appendChild(img);

        let li = document.createElement('li');
        ul.appendChild(li);
        li.innerHTML = info.artist + " - " + info.title;
    });

},
}

var handlers = {
addImageAndRedraw: function() {
    var fileInput = document.getElementById('fileInput');
    var artistField = document.getElementById('artistField');
    var titleField = document.getElementById('titleField');

    if (fileInput.files.length === 1) {
        info.add(fileInput.files[0], artistField.value, titleField.value);
        info.redraw();
    }
}
}

var button = document.getElementById('button');
button.addEventListener('click', handlers.addImageAndRedraw);

<h1>My images</h1>

<input id="fileInput" type="file" accept="image/*" multiple="false" value="Select image">
<input id="button" type="button" value="Add image and redraw">

<div>
<input id="artistField" type="text" placeholder="artist">
<input id="titleField" type="text" placeholder="title">
</div>

<hr>

<div id="myImages"></div>

<ul></ul>

如何在网页上显示数组中的图像和文本？

1 个答案: