Jquery 单击函数不适用于所有 ID

Question

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

{

1. { album.product_name }} 分类 ： {{ album.product_category }} 价格 ： {{ album.product_price }}

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

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

以下是 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 的第一个元素。