我对javascript非常陌生,并且正在从事一个小项目。我的javascript文件中有一小部分对象,我想使用它们创建和填充产品卡。
我当前设置的产品卡大约有20行,我采用了这种方法来查看是否可以使用document.createElement ... append元素等,这样做之后,我的对象似乎遇到了一些问题是未定义的,我需要能够附加到标签中,这样我就可以定义类和id,以便我的CSS可以选择代码并使其 pretty (例如<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很有用,但是我不确定会尽力使用它。
答案 0 :(得分:1)
您可以使用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>