Question

请原谅我，如果这是多余的，我很难找到专门使用香草JS的问题/答案。

我有一个我创建的商店项目的数据对象，我试图在页面上显示，但我似乎只是让数组中的第一个项目出现，这让我相信我需要某种形式for循环与数组长度相关，但我尝试了变化，我似乎得到了相同的结果（只有第一项），或者在某些情况下没有任何结果。

我已经注销了HTML，并且控制台中有正确的项目，因此它的工作正常。我错过了什么。

feature = () => isFeatured.map(item => {
  // console.log("imworking");
  html = `
      <img src="${item.image}" alt=""> 
      <h2>${item.info}</h2>
      <h3>${item.price}</h3>
      <button>Add to Cart</button>
        `
  //console.log(html);
  document.getElementById('featuredItem').innerHTML = html;
})

我不认为问题是HTML，因为一个项目显示正常，但这里无论如何

<div id="featuredItem"></div>

Answer 1

每次循环运行时，您都会替换featuredItem的HTML。此外，您不应使用map，因为您没有映射到新数组;请改用forEach。另外，请确保使用const（或let）声明所有变量，以避免隐式创建全局变量，这应该避免：

const feature = () => isFeatured.forEach(item => {
  // console.log("imworking");
  const html = `
<img src="${item.image}" alt=""> 
<h2>${item.info}</h2>
<h3>${item.price}</h3>
<button>Add to Cart</button>
`;
  //console.log(html);
  document.getElementById('featuredItem').innerHTML += html;
});
feature();

但直接将变量插入到HTML标记中并不是那么安全。最好显式创建和追加元素，为textContent分配值，如下所示：

const featuredItem = document.querySelector('#featuredItem');
const feature = () => isFeatured.forEach(({ image, info, price }) => {
  featuredItem
    .appendChild(document.createElement('img'))
    .src = image;
  featuredItem
    .appendChild(document.createElement('h2'))
    .textContent = info;
  featuredItem
    .appendChild(document.createElement('h3'))
    .src = price;
  featuredItem
    .appendChild(document.createElement('button'))
    .textContent = 'Add to Cart';
});
feature();

Answer 2

抱歉，这太晚了，希望您已经知道了！我在评论部分的空间不足，因此我将对@maxineheadroom的回复扔到这里。如果我理解您的问题，您是否希望将img标签和按钮包装在div中？我将创建一个名为creatItem的新函数。 const createItem = (item) => { const wrapper = document.createElement('div'); wrapper.classList.add(`item_${item.id}`) const img = document.createElement('img').src = item.img const info = document.createElement('h2').textContent = item.info; const price = document.createElement('h3').textContent = item.price; const btn = document.createElement('button').textContent = 'Add to cart' wrapper.appendChild(img); wrapper.appendChild(info); wrapper.appendChild(price); wrapper.appendChild(btn); return wrapper } 然后在您的for循环中，您可以 featuredItem.appendChild(createItem(item))

Answer 3

这是因为您正在通过循环HTML更改和innerhtml来设置innerhtml。您应该有一个由循环生成的字符串HTML的容器。

feature = () => isFeatured.map(item => {
    let markup = new Array();
    html = `
        <img src="${item.image}" alt=""> 
        <h2>${item.info}</h2>
        <h3>${item.price}</h3>
        <button>Add to Cart</button>      
        `
    markup.push(html);
    html = markup.join("");
    document.getElementById('featuredItem').innerHTML = html;
})

也可以是，如果您使用appendchild而不是innerhtml。

使用vanilla JS从数据对象填充html

3 个答案: