在JavaScript中通过在数组上输入数据来循环目标卡片
在JavaScript中通过在数组上输入数据来循环目标卡片
提问于 2020-04-07 03:42:52
我想做一张循环卡片，
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title" id="itemName">Nama</h5>
<p class="card-text" id="itemDesc">Deskripsi barang</p>
<p class="card-text">Rp Harga</p>
<a href="#" class="btn btn-primary" id="addCart">Tambahkan ke keranjang</a>
</div>
</div>通过下面的数组输入数据
var items = [
['001', 'Keyboard Logitek', 60000, 'Keyboard yang mantap untuk kantoran', 'logitek.jpeg'],
['002', 'Keyboard MSI', 300000, 'Keyboard gaming MSI mekanik', 'msi.jpeg'],
['003', 'Mouse Genius', 50000, 'Mouse Genius biar lebih pinter', 'genius.jpeg'],
['004', 'Mouse Jerry', 30000, 'Mouse yang disukai kucing', 'jerry.jpeg']
]回答 1
Stack Overflow用户
回答已采纳
发布于 2020-04-07 03:55:54
你可以使用简单的迭代，我已经使用了Array.reduce来获得最终的输出，然后将其附加到dom中。
var items = [
['001', 'Keyboard Logitek', 60000, 'Keyboard yang mantap untuk kantoran', 'logitek.jpeg'],
['002', 'Keyboard MSI', 300000, 'Keyboard gaming MSI mekanik', 'msi.jpeg'],
['003', 'Mouse Genius', 50000, 'Mouse Genius biar lebih pinter', 'genius.jpeg'],
['004', 'Mouse Jerry', 30000, 'Mouse yang disukai kucing', 'jerry.jpeg']
]
let data = items.reduce((acc, ele) => {
acc += `<div class="card" style="width: 18rem;">
<img src="pathtofolder/${ele[5]}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title" id="itemName">${ele[1]}</h5>
<p class="card-text" id="itemDesc">${ele[2]}</p>
<p class="card-text">${ele[4]}</p>
<a href="#" class="btn btn-primary" id="addCart">${ele[5]}</a>
</div>
</div>`
return acc;
}, '')
document.getElementById("data").innerHTML = data;<div id="data">
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61067716
复制相关文章
相似问题
腾讯云开发者
