Javascript-循环创建卡片列表

HTML和简单JS（无react/vue）。 我需要做一个卡片列表，并想做一个循环，以避免重复html

我当前的代码：

<div id="products-cards-container">
    <div class="products-cards">              
        <div class="product-header">
            <img src="../assets/img/image1.png"/>
        </div>
        <div class="product-content">
            <h4>title 1</h4>
            <p>super content 1</p>
        </div> 
        <button class="info-button">+ info</button>
    </div>
    <div>
        <div class="product-header">
            <img src="../assets/img/cards/products/image2.png"/>
        </div>
        <div class="product-content">
            <h4>title 2</h4>
            <p>super content 2</p>
        </div> 
        <button class="info-button">+ info</button>
    </div>
    <div>
        <div class="product-header">
            <img src="../assets/img/cards/products/image-3.png"/>
        </div>
        <div class="product-content">
            <h4>title 3</h4>
            <p>blablablablbalbalbabla blablaba</p>
        </div> 
        <button class="info-button">+ info</button>
    </div>\
</div>

创建将卡片列表插入到.products cards div中的函数：

    function returnCards() => {
    ----- AND HERE I AM STUCK
   (as well, all tries I did with a simple array / object returned only the last info) ----
    }

const valuesCards=[
{ 
图像：'../img/image1.png'，
标题：“标题1”，
内容：“超级内容1”，
},
{
图像：'../img/image2.png'，
标题：“标题2”，
内容：“超级内容2”
},
{ 
图像：'../img/image-3.png'，
标题：“标题3”，
内容：“布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉巴”
},
]
valuesCards.map（卡=>{
var cardDiv=document.createElement（'div'）；
cardDiv.innerHTML=`
${card.title}
${card.content}

+信息`
document.getElementsByClassName（'products-cards'）[0].appendChild（cardDiv）；
})

---

使用

Array.prototype.map

函数和模板文本

const container=document.getElementById（'products-cards-container'）；
const valuesCards=[{
图像：'../img/image1.png'，
标题：“标题1”，
内容：“超级内容1”，
},
{
图像：'../img/image2.png'，
标题：“标题2”，
内容：“超级内容2”
},
{
图像：'../img/image-3.png'，
标题：“标题3”，
内容：“布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉巴”
},
]
功能返回卡（值标记）{
返回“”+valuesCard.map（valuesCard=>`
${valuesCard.title}
${valuesCard.content}

+信息
`).join（“”）+“”；
}
container.innerHTML=返回卡（valuesCards）
你可以这样做


const valuesCards=[
{ 
图像：'../img/image1.png'，
标题：“标题1”，
内容：“超级内容1”，
},
{
图像：'../img/image2.png'，
标题：“标题2”，
内容：“超级内容2”
},
{ 
图像：'../img/image-3.png'，
标题：“标题3”，
内容：“布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉巴”
},
];
让cardHTML=''；
valuesCards.map（元素=>{
cardHTML+='\
\
\
\
\
“+元素.标题+”\
“+元素.内容+”
\
\
+信息\
\
';
});
document.getElementsByClassName（'products-cards'）[0].innerHTML=cardHTML

您需要在valuesCards对象上执行一个“for循环”，并为每个值返回一个html模板，并将其注入DOM中所需的元素

例如：

    // Define the object
    const valuesCards = [
      {
        'image': '../img/image1.png',
        'title': 'title 1',
        'content': 'super content 1',
      },
      {
        'image': '../img/image2.png',
        'title': 'title 2',
        'content': 'super content 2'
      },
      {
        'image': '../img/image-3.png',
        'title': 'title3',
        'content': 'blablablablbalbalbabla blablaba'
      }
    ]
    
    // Identify the DOM element to store cards
    cardsContainer = document.querySelector('#products-cards-container');
    
    // Create a loop that iterates over valuesCards object
    for (let value of Object.values(valuesCards)) {
      console.log(value.title);
        // Create an element to store new card content
        let newCard = document.createElement('DIV');
    
        // Add products-cards class to new element
        newCard.classList.add('products-cards');
    
        // Create a multiline string template with current values each time 
        cardHtml = `
           <div class="">              
            <div class="product-header">
                <img src="${value.image}"/>
            </div>
            <div class="product-content">
                <h4>${value.title}</h4>
                <p>${value.content}</p>
            </div> 
            <button class="info-button">+ info</button>
           </div>   
        `;
    
        // Append the new element to the cardsContainer element in DOM
        cardsContainer.appendChild(newCard);
    
        // Inject the template html on DOM's new append item
        newCard.innerHTML = cardHtml;
    
    }

//定义对象
const valuesCards=[
{
“image”：“../img/image1.png”，
“标题”：“标题1”，
“内容”：“超级内容1”，
},
{
“image”：“../img/image2.png”，
“标题”：“标题2”，
“内容”：“超级内容2”
},
{
“image”：“../img/image-3.png”，
“标题”：“标题3”，
“内容”：“布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉巴”
}
]
//标识存储卡的DOM元素
cardsContainer=document.querySelector（“#产品卡容器”）；
//创建在valuesCards对象上迭代的循环
for（让对象的值。值（valuesCards））{
console.log（value.title）；
//创建一个元素来存储新的卡片内容
让newCard=document.createElement（'DIV'）；
//将产品卡类添加到新元素
newCard.classList.add（'products-cards'）；
//每次使用当前值创建多行字符串模板
cardHtml=`
${value.title}
${value.content}

+信息
`;
//将新元素附加到DOM中的cardsContainer元素
cardsContainer.appendChild（新卡）；
//在DOM的新附加项上注入模板html
newCard.innerHTML=cardHtml；
}

重要的！！在html中使用id=“products cards container”创建一个div元素，用于打印卡片。
Todavía no aparece nada。el documento donde pongo tu codigo se allama cards-content.js不知道我有什么护墙板。De momento importo asíen mi documento html:。我对我的代码做了一些修改，并在本地进行了测试。现在应该可以了。
    // Define the object
    const valuesCards = [
      {
        'image': '../img/image1.png',
        'title': 'title 1',
        'content': 'super content 1',
      },
      {
        'image': '../img/image2.png',
        'title': 'title 2',
        'content': 'super content 2'
      },
      {
        'image': '../img/image-3.png',
        'title': 'title3',
        'content': 'blablablablbalbalbabla blablaba'
      }
    ]
    
    // Identify the DOM element to store cards
    cardsContainer = document.querySelector('#products-cards-container');
    
    // Create a loop that iterates over valuesCards object
    for (let value of Object.values(valuesCards)) {
      console.log(value.title);
        // Create an element to store new card content
        let newCard = document.createElement('DIV');
    
        // Add products-cards class to new element
        newCard.classList.add('products-cards');
    
        // Create a multiline string template with current values each time 
        cardHtml = `
           <div class="">              
            <div class="product-header">
                <img src="${value.image}"/>
            </div>
            <div class="product-content">
                <h4>${value.title}</h4>
                <p>${value.content}</p>
            </div> 
            <button class="info-button">+ info</button>
           </div>   
        `;
    
        // Append the new element to the cardsContainer element in DOM
        cardsContainer.appendChild(newCard);
    
        // Inject the template html on DOM's new append item
        newCard.innerHTML = cardHtml;
    
    }