对每个元素具有多个值的数组使用函数的普通Javascript

提问者：小点点

对每个元素具有多个值的数组使用函数的普通Javascript

我想使用以下（创建一个画廊卡片，信息是通过数组提供的初始和一个表单添加额外），我已经能够得到以下函数工作的信息，通过表单添加，但没有能够得到函数工作的数组我有。

function galleryAddItems(image, title){
    const galleryElement = galleryTemplate.cloneNode(true);

    galleryElement.querySelector(".gallery__image").src = image;
    galleryElement.querySelector(".gallery__text").textContent = title;

    galleryContainer.prepend(galleryElement);

}

在我的阵列上


const initialCards = [
    {
        name: "The End Place",
        link: "images/cliffside__Katie-Rodriguez.jpg"
    },
    {
        name: "Turn That Leaf Over",
        link: "images/leaf__chuttersnap.jpg"
    },
    ...

];

当前有第二个函数设置为

initialCards.forEach(function(thingy){
    const galleryElement = galleryTemplate.cloneNode(true);

    galleryElement.querySelector(".gallery__image").src = thingy.link;
    galleryElement.querySelector(".gallery__text").textContent = thingy.name;

    galleryContainer.append(galleryElement);

});

并希望避免重复代码以使其工作。

我以前已经让galleryAddItems在函数中包含了。value，因为它在不同的地方是需要的，但是在调用它的时候，希望它能在这里工作。我试过了

initialcards.foreach（galleryAddItems（link，name）），并尝试了initialcards.link/。name initialcardslink/initialcardsname等方法。如果我不输入参数，我将无法获得图像URL，索引将放置在我希望获得名称/标题的位置。

共2个答案

匿名用户

您需要将一个函数传递给foreach函数，当前传递的是GalleryAddItems的返回值，因为您正在调用它。

我建议重构代码，使GalleryAddItems将一张卡作为参数，然后使用foreach为每张卡调用它。

function galleryAddItems(card){
    const galleryElement = galleryTemplate.cloneNode(true);

    galleryElement.querySelector(".gallery__image").src = card.link;
    galleryElement.querySelector(".gallery__text").textContent = card.name;

    galleryContainer.prepend(galleryElement);

}

// Call galleryAddItems for each card
initialCards.forEach(galleryAddItems)

匿名用户

无需更改GalleryAddItems()函数的简单方法是:

initialCards.forEach(thingy => galleryAddItems(thingy.link, thingy.name));

就我个人而言，我可能会考虑将第一个函数改为:

function galleryAddItems(image) {
    const galleryElement = galleryTemplate.cloneNode(true);

    galleryElement.querySelector(".gallery__image").src = image.link;
    galleryElement.querySelector(".gallery__text").textContent = image.name;

    galleryContainer.prepend(galleryElement);

}

因此您可以简单地执行以下操作:

initialCards.forEach(galleryAddItems);