与函数链接

Question

我在"products.html"有一个产品列表数组(具有唯一id，名称，价格等)。(js)

每个产品都有一个按钮，"更多信息"。

我想点击那个按钮，查看那个产品的详细信息(每个产品有不同的信息细节，以另一个html (detail.html)结尾)

我代码:

const listShirts = document.getElementById('shirts')
shirts.map((prod, i ) => {
let card = document.createElement('div')
card.classList.add('row')
card.innerHTML = `
<div class="col-sm-6 col-md-3" style="padding-top: 1.5rem;">
<div class="card conLink" onclick="moreShirt(i)"  >
<img src="${prod.img}" class="card-img-top welcome-imagen" alt="">
<div class="card-body">
<h5 class="card-title welcome-titulo" alt="">${prod.name}</h5>
<span class="card-title welcome-precio" alt="" >$ ${prod.price}</span >
<div>
<div class="welcome-color1" style="display: inline-block;"></div>
<div class="welcome-color2" style="display: inline-block;"></div>
<div class="welcome-color3" style="display: inline-block;"></div>                                        
</div>
<div class="btn btn-primary welcome-vermas-producto"  >MORE INFO</div>
</div>

</div>
</div>`

listaRemeras.appendChild(card)
})

Answer 1

听起来您想使用数据属性。MDN上有完整的解释:https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes…但基本的想法是你可以这样做:

<button id="dateButtton" date-size="xl"/>

，然后在javascript中:

document.querySelector('#dateButton').dataset.size

来访问。或者，在按钮内部单击处理程序:

const clickHandler = e => console.log(e.target.dataset.size);