将文本绑定到模式框中的特定ID

Question

我有一个while循环，它从mysql数据库中回显3个随机行。每行包含一个id和一个description。在我的前端，每一行都显示了id，以及一段非常简短的描述。每行都有一个按钮，用于调用引导模式框，您可以在其中阅读更长的描述。这是它是如何看起来像：

我while循环，它输出的随机ID和描述，当你点击“更多”工作正常弹出。但在modalbox中，我需要绑定属于id的描述（fx id：319需要在modalbox中回显testtestte）。

我试着按照下面这个好的解释来解决这个问题： Alternate Solution with Ajax and Bootstrap Modal Event Listener，我得到了很多。

我该如何在我的file.php中创建一个select语句来输出描述，该语句属于我单击的单个按钮的ID？

我在这里发布的代码很长。我试图缩短一些，但我认为一切都是相关的。如果没有，请给我一个头。

select_shuffle.php

<!-- Everything is working in this file --> 
<?php 
    $sql = "SELECT id, description FROM stores ORDER BY RAND () LIMIT 3"; 
    $res = $mysqli->query($sql); 

    //print($res); 
    if ($res->num_rows > 0) { 
    // output data of each row 
     while($row = $res->fetch_assoc()) { 
      echo "id: " . $row["id"]. "<br>" . 
       "Description: " . $row["description"]. "<br><br>". 
       '<span data-placement="top" data-toggle="tooltip" title="Show"><a class="btn btn-primary btn-xs" data-toggle="modal" data-target="#editBox" data-id="<?php echo $obj->id;?>"><span class="glyphicon glyphicon-pencil"></span></a></span>';    
     } 
    } else { 
    echo "0 results"; 
    } 
?> 
<div class="modal fade" id="editBox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title"><center>Heading</center></h4> 
      </div> 
      <div class="modal-body"> 
       <div class="form-data"> 
        //Here Will show the Data 
       </div> 

      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default">Select</button> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
    </div> 
</div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script src="js/bootstrap.min.js"></script> 
<script> 
$(document).ready(function() {  
    $('#myModal').on('show.bs.modal', function (e) { //Modal Event 
     var id = $(e.relatedTarget).data('id'); //Fetch id from modal trigger button 
    $.ajax({ 
     type : 'post', 
     url : 'file.php', //Here you will fetch records 
     data : 'post_id='+ id, //Pass $id 
     success : function(data){ 
     $('.form-data').html(data);//Show fetched data from database 
     } 
    }); 
    }); 
}); 
</script> 

下面的文件，我不知道该如何选择我的ID绑定的描述？

file.php

<?php 
include 'dbconnection.php'; 

if($_POST['id']) { 
    $id = $_POST['id']; 

    $sql = "SELECT id, description FROM stores"; 

    echo $sql; 

    else { 
    echo "0 results"; 
} 

?> 

Answer 1

<button class='read-button' type='button' id="button-<?php echo $row['id'];?>">Read more</button> 

现在当你使用jQuery选择，像

$('.read-button').click(function(){console.log($(this).attr('id');});

将输出类似按钮-319。您也可以在按钮中设置其他数据属性，例如data-id=319，并使用jQuery attr()来获取该数据。关键是你需要知道哪个按钮被点击并通过了id。