我正试图建立一个网页。我想用JavaScript创建一个动态呈现的图像和标题网格。我的文件中有一个对象数组，它们有一个图像src和title。

我想遍历对象数组，然后通过追加到父div使每个项在网格中呈现。

发生的情况是，它只显示对象中的最后一项，加载标题的图像url有问题。它当前只显示一个图像。

我需要帮助来解决这个问题。

以下是JS矩数组:

const moments = [
    {
        image: "./inages/pexels-ali-pazani-2613260.jpg",
        title: "WIDE BRIM HAT"
    },
    {
        image: "./inages/pexels-jonas-togo-3072141.jpg",
        title: "OSCAR WILDE"
    },
    {
        image: "./inages/pexels-simon-robben-977796.jpg",
        title: "LOOK! A BIRD"
    },
    {
        image: "./inages/pexels-kira-schwarz-9169378.jpg",
        title: "BUBBLES!"
    },
    {
        image: "./inages/pexels-maksim-goncharenok-5046542.jpg",
        title: "CHAMPAGNE POPPY"
    },
    {
        image: "./inages/pexels-eberhard-grossgasteiger-4406335.jpg",
        title: "ERUPTION"
    },
    {
        image: "./inages/pexels-suliman-sallehi-1484771.jpg",
        title: "BOND. JAMES BOND"
    },
    {
        image: "./inages/pexels-nataliya-vaitkevich-5712923.jpg",
        title: "1327 STEPS"
    },
    {
        image: "./inages/pexels-a-koolshooter-5601107.jpg",
        title: "DIOR"
    },
]

我有一个函数，它将运行并创建我想作为最终结果生成的结构。

这是我想要的最终结果...

const moments = [
    {
        image: "./inages/pexels-ali-pazani-2613260.jpg",
        title: "WIDE BRIM HAT"
    },
    {
        image: "./inages/pexels-jonas-togo-3072141.jpg",
        title: "OSCAR WILDE"
    },
    {
        image: "./inages/pexels-simon-robben-977796.jpg",
        title: "LOOK! A BIRD"
    },
    {
        image: "./inages/pexels-kira-schwarz-9169378.jpg",
        title: "BUBBLES!"
    },
    {
        image: "./inages/pexels-maksim-goncharenok-5046542.jpg",
        title: "CHAMPAGNE POPPY"
    },
    {
        image: "./inages/pexels-eberhard-grossgasteiger-4406335.jpg",
        title: "ERUPTION"
    },
    {
        image: "./inages/pexels-suliman-sallehi-1484771.jpg",
        title: "BOND. JAMES BOND"
    },
    {
        image: "./inages/pexels-nataliya-vaitkevich-5712923.jpg",
        title: "1327 STEPS"
    },
    {
        image: "./inages/pexels-a-koolshooter-5601107.jpg",
        title: "DIOR"
    },
]

这是我拥有的函数

const moments = [
    {
        image: "./inages/pexels-ali-pazani-2613260.jpg",
        title: "WIDE BRIM HAT"
    },
    {
        image: "./inages/pexels-jonas-togo-3072141.jpg",
        title: "OSCAR WILDE"
    },
    {
        image: "./inages/pexels-simon-robben-977796.jpg",
        title: "LOOK! A BIRD"
    },
    {
        image: "./inages/pexels-kira-schwarz-9169378.jpg",
        title: "BUBBLES!"
    },
    {
        image: "./inages/pexels-maksim-goncharenok-5046542.jpg",
        title: "CHAMPAGNE POPPY"
    },
    {
        image: "./inages/pexels-eberhard-grossgasteiger-4406335.jpg",
        title: "ERUPTION"
    },
    {
        image: "./inages/pexels-suliman-sallehi-1484771.jpg",
        title: "BOND. JAMES BOND"
    },
    {
        image: "./inages/pexels-nataliya-vaitkevich-5712923.jpg",
        title: "1327 STEPS"
    },
    {
        image: "./inages/pexels-a-koolshooter-5601107.jpg",
        title: "DIOR"
    },
]

我希望构建每个结构并将其附加到div featuredmomentsdiv。 这是当前运行代码时正在打印的内容:

在此处输入图像说明

顺晟科技：

您可以map通过数组构造相应的字符串，在正确的位置插入属性，然后联接结果:

如果and属性包含要转义的HTML，则可以构造元素并设置它们的and:

必须为每个循环周期创建一个新元素。

const moments = [
    {
        image: "./inages/pexels-ali-pazani-2613260.jpg",
        title: "WIDE BRIM HAT"
    },
    {
        image: "./inages/pexels-jonas-togo-3072141.jpg",
        title: "OSCAR WILDE"
    },
    {
        image: "./inages/pexels-simon-robben-977796.jpg",
        title: "LOOK! A BIRD"
    },
    {
        image: "./inages/pexels-kira-schwarz-9169378.jpg",
        title: "BUBBLES!"
    },
    {
        image: "./inages/pexels-maksim-goncharenok-5046542.jpg",
        title: "CHAMPAGNE POPPY"
    },
    {
        image: "./inages/pexels-eberhard-grossgasteiger-4406335.jpg",
        title: "ERUPTION"
    },
    {
        image: "./inages/pexels-suliman-sallehi-1484771.jpg",
        title: "BOND. JAMES BOND"
    },
    {
        image: "./inages/pexels-nataliya-vaitkevich-5712923.jpg",
        title: "1327 STEPS"
    },
    {
        image: "./inages/pexels-a-koolshooter-5601107.jpg",
        title: "DIOR"
    },
]