javascript - 如何在 JavaScript 中将对象数组附加到卡片元素

Question

我对 javascript 很陌生，我正在开发一个小项目。我的 javascript 文件中有一小部分对象，我想用它们来创建和填充产品卡。

我当前的产品卡设置大约有 20 行，我已经采取了这种方法来查看是否可以使用 document.createElement...append element 等，在这样做之后，我的对象似乎遇到了一些问题未定义加上我需要能够附加到标签中，以便我可以定义类和 id，以便我的 css 能够接收代码并使其漂亮，例如 <div class = "test>" 。总的来说，这只是一团糟，并且需要构建该卡所需的三倍代码行。

这是我的 javascript 数组的片段

       window.products = [
    {
        name: "Berry Leash",
        img: 'src="images/leashes/berry.jpg" alt="berry leash"',
        price: 14.99,
        onsale: 0.0,
        tags: "Leash",
        description: "A fresh taste on a collar,"
    },

这是我将要使用的卡片布局的片段。

 <div class="product-card">
            <div class="badge">Hot</div>
            <div class="product-tumb">
                <img src="images/dog-running.jpg" alt="" />
            </div>
            <div class="product-details">
                <span class="product-catagory">dog1,dog2</span>
                <h4><a href="">big boy</a></h4>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Vero, possimus nostrum!
                </p>
                <div class="product-bottom-details">
                    <div class="product-price">
                        <small>$96.00</small>$230.99
                    </div>
                    <button>buy now</button>
                    <div class="product-links">
                        <a><i class="fa fa-heart"></i></a>
                        <a><i class="fa fa-shopping-cart"></i></a>
                    </div>
                </div>
            </div>
        </div>

我希望用与数组中的对象一样多的卡片填充页面。

到目前为止，我的结果尚未定义，基本上是一堆乱七八糟的代码，我可以提供我正在使用的代码，但它没有用，我不想在它的基础上进行构建。我听说 .map 很有用，但我不确定是否能充分发挥它的潜力。

Answer 1

您可以使用 JS 循环遍历每个产品，使用模板文字语法 (${variable}) 组合产品，然后将其重新注入(inject)到 DOM 中。

示例:

products = [
    {
        name: "Berry Leash",
        img: 'src="images/leashes/berry.jpg" alt="berry leash"',
        price: 14.99,
        onsale: 0.0,
        tags: "Leash",
        description: "A fresh taste on a collar,"
    },
    {
        name: "Tommy Leash",
        img: 'src="images/leashes/berry.jpg" alt="berry leash"',
        price: 14.99,
        onsale: 0.0,
        tags: "Leash",
        description: "A fresh taste on a collar,"
    }
]

products.forEach(product => {
	var div = document.querySelector('div')
  
	div.innerHTML = div.innerHTML + `
          <div class="product-card">
              <div class="badge">Hot</div>
              <div class="product-tumb">
                  <img src="images/dog-running.jpg" alt="" />
              </div>
              <div class="product-details">
                  <span class="product-catagory">dog1,dog2</span>
                  <h4><a href="">${product.name}</a></h4>
                  <p>
                      ${product.description}
                  </p>
                  <div class="product-bottom-details">
                      <div class="product-price">
                          <small>$96.00</small>${product.price}
                      </div>
                      <button>buy now</button>
                      <div class="product-links">
                          <a><i class="fa fa-heart"></i></a>
                          <a><i class="fa fa-shopping-cart"></i></a>
                      </div>
                  </div>
              </div>
          </div>

          <br />
          <br />
  `
})

<div></div>