Question

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

           {{album.product_name}}       类别：{{album.product_category}}

      价格：{{album.product_price}}
$（document）.ready（function（）{ $（'＃k'）。click（function（）{ var a = $（'＃custId'）。val（）; 警报（a） console.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的第一个元素作为目标。 / p>

jQuery单击功能不适用于所有ID

1 个答案: