如何使每个按钮可点击？ [重复]

Question

这个问题在这里已有答案：

• Does ID have to be unique in the whole page? 10个答案
• Can't fire click event on the elements with same id 6个答案

所以我循环遍历JSON对象并在View中呈现数据。每个对象还有一个我创建的按钮。当我打电话给那个按钮的想法做一些动作时，只有第一个按钮有效。这是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"数据。假设我点击id="clickable"时循环播放10部不同的电影但只有第一部电影有效。

谢谢。

Answer 1

这是你的标记。

<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>

问题是你有重复的id，clickable和id。这两者都需要是类，因为DOM中的重复ID是无效标记。

<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>

现在我们只需要修改绑定和id查找来使用这些类。

$(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();
    });
});