PHPループのHTML ID +モーダル（jquery）

Question

私はループを使用して、ユーザーが追加した各イベントのすべての詳細を取得して表示しました。ループの中には、モーダル用のボタンが含まれていました。問題は、複数のイベントがある場合、<button class="btn btn-success" id="read">Read More</button>は機能しません。これをどうすれば回避できますか？

このPHPコード

<?php 

      while ($event_row = mysqli_fetch_array($event_data)){ 
       $event_img = $event_row['event_img']; 
       $img_src = "../admin/eventImages/".$event_img; 
       echo '<div class="col-sm-6 p0"> 
         <div class="box-two proerty-item"> 
          <div class="item-thumb"> 
           <img src="'.$img_src.'"> 
          </div> 
          <div class="item-entry overflow"> 
           <h5><a href="property-1.html">'.$event_row['event_name'].'</a></h5> 
          <div class="dot-hr"></div> 
           <span class="pull-left"><b> Date: </b>'.date("Y-m-d h:i A", strtotime($event_row['event_start'])).'</span> 
           <span class="pull-left"><b>Location: </b>'.$event_row['event_location'].'</span> 
           <div class="property-icon"> 
            <button class="btn btn-success" id="read">Read More</button> 
           </div> 
          </div> 
         </div> 
        </div>'; 
      } 
      ?> 

、これが私のjqueryのコードです：

$(document).ready(function(){ 
    $("#read").click(function(){ 
    ("#readmore").modal("show"); 
}); 
}); 

Answer 1

classセレクタを追加します。また、識別のために各ボタンに固有の属性を追加します。

$(document).ready(function(){ 
    $(".read-more").click(function(){ 
    console.log($(this).id); 
    $("#readmore").modal("show"); 
}); 
}); 

Answer 2

あなたの代わりにIDとしてidのclassを使用する必要があるよりも、あなたは、複数のボタンがある場合は

<button class="btn btn-success read-more" id="read-more-1">Read More</button>は常にユニークです：HTMLで

変更：

<button class="btn btn-success readmore">Read More</button> 

JQueryの変更点：

$(document).ready(function(){ 
    $(".readmore").click(function(){ 
    ("#readmore").modal("show"); 
}); 
});