Jquery点击功能不适用于所有ID

Question

我创建了一个包含数据库中所有产品的页面，这是一个动态页面。列是循环创建的。每当用户单击产品时，我都会获取唯一的产品 ID，但这仅适用于一个产品，即使未触发单击功能，也适用于下一个产品。下面是代码供参考。

1. {{ 专辑.产品名称 }} 类别：{{专辑.product_category }} 价格：{{专辑.product_price }}

2. $(document).ready(function() { $('#k').click(function(){ var a = $('#custId').val(); 警报（一） 控制台日志（一） });

这仅适用于第一个产品，即循环中的第一个产品。休息时，点击功能不起作用。请帮忙！

以下是 HTML 代码：

<div class="card-body"> 
    <a href="#" id="k">
        <img src="qph.fs.quoracdn.net/…" class="card-img-top" alt="..." height="90px" width="85px" id="k">
    </a> 
    <h5 class="card-title">{{ album.product_name }}</h5>
    <p class="card-text">Category : {{ album.product_category }}</p>
    <p class="card-text">Price : {{ album.product_price }}</p>
    <input type="hidden" id="custId" value={{ album.id }}> 
</div>

Answer 1

您不能有多个具有相同 ID 的元素。考虑为所有目标元素添加一个通用类名，例如myClass，然后您可以使用以下方法绑定所需的事件：

$('.myClass').click(function(){ 
    //your code here...
});

解释：浏览器假定您只有一个 id 为 k 的元素（因为按照惯例应该是这样），因此 $("#k") 将只针对具有该 ID 的第一个元素。