将 onclick 与函数链接

Posted 2023-05-07

【中文标题】将 onclick 与函数链接

【英文标题】：Link onlick with a function

【发布时间】：2021-12-07 19:05:03

【问题描述】：

我在“products.html”（带有 js）中有一组产品列表（带有唯一 ID、名称、价格等）

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

我想点击那个按钮，查看那个产品的详细信息（每个产品都有不同的信息详细信息，以另一个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" >
            <div class="card-body">
            <h5 class="card-title welcome-titulo" >$prod.name</h5>
            <span class="card-title welcome-precio"  >$ $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)
)

【问题讨论】：

什么不起作用？你有错误吗？

【参考方案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);