[英]How to append an array of objects to a card element in javascript
我对javascript非常陌生,正在从事一个小项目。 我的javascript文件中有一小部分对象,我想使用它们创建和填充产品卡。
我当前设置的产品卡大约有20行,我采用了这种方法来查看是否可以使用document.createElement ... append元素等,这样做之后,我遇到了一些问题,对象似乎是未定义的,另外我需要能够附加到标签中,这样我才能定义类和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很有用,但我不确定使用它的全部潜力。
您可以使用JS遍历每个产品,使用模板文字语法( ${variable}
)组合产品,然后将其重新注入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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.