如何让每个按钮都可以点击？ [复制]答案

【问题标题】：How to make each button clickable? [duplicate]如何让每个按钮都可以点击？ [复制]
【发布时间】：2023-03-15 08:04:02
【问题描述】：

所以我正在循环一个 JSON 对象并在视图中呈现数据。每个对象还有一个我创建的按钮。当我调用该按钮的想法来执行某些操作时，只有第一个按钮有效。这是html代码：

<div class="row text-center" style="display:flex; flex-wrap: wrap;">
    <% data["Search"].forEach((movie) => { %>
      <div class="col-md-3 col-sm-6">
        <div  class="thumbnail">
          <div class="caption">
            <li><%= movie["Title"] %></li>
            <li><%= movie["Year"] %></li>
            <li id="id"><%= movie["imdbID"]%></li>
          </div>
          <img  src="<%= movie["Poster"] %>" alt="">
          <button id="clickable"  type="button" name="button">Get More details About The Movie</button>
        </div>
      </div>
    <% }) %>
</div>
</div>

按钮有id="clickable"。这是jQuery的代码：

<script  type="text/javascript">
$(document).ready(function(){
//alert(this).data("#hello");
$( "#clickable" ).click(function() {
  var item = $("#id").text();
  alert('Selected Name = ' + item );
});
});

现在我只显示id="id" 数据。假设循环播放 10 部不同的电影，但当我单击 id="clickable" 时只有第一部有效。

谢谢。

【问题讨论】：

改用类和上下文查找
是的，每部电影都有自己唯一的 ID。 @Taplar
所有按钮都有相同的 id。并且在每一个中，其中一个 id 都具有相同的 id id
哦，好的，我明白了。由于我正在循环遍历它，我如何为每个
@Taplar

<div class="col-md-3 col-sm-6"> <div class="thumbnail"> <div class="caption"> <li><%= movie["Title"] %></li> <li><%= movie["Year"] %></li> <li id="id"><%= movie["imdbID"]%></li> </div> <img src="<%= movie["Poster"] %>" alt=""> <button id="clickable" type="button" name="button">Get More details About The Movie</button> </div> </div>

<div class="col-md-3 col-sm-6"> <div class="thumbnail"> <div class="caption"> <li><%= movie["Title"] %></li> <li><%= movie["Year"] %></li> <li class="id"><%= movie["imdbID"]%></li> </div> <img src="<%= movie["Poster"] %>" alt=""> <button class="clickable" type="button" name="button">Get More details About The Movie</button> </div> </div>

$(document).ready(function(){ //bind on the class $( ".clickable" ).click(function() { //the relation of clickable to id is, they are both children of the thumbnail. //so we can go up from the clickable we clicked to it's parent //thumbnail, and then find the nested id var item = $(this).closest('.thumbnail').find(".id").text(); }); });