将文本绑定到模态框中的特定 id

Question

我有一个 while 循环，它从 mysql 数据库中回显 3 个随机行。每行包含一个id 和一个description。在我的前端，每一行都显示有 id 和很短的描述文本。每行都有一个按钮，该按钮调用引导模式框，您可以在其中阅读更长的描述。这是它的样子：

我的 while 循环输出随机 id 和描述，当您单击“阅读更多”时弹出的窗口工作正常。但是在modalbox中我需要绑定属于id的description（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');});

会输出类似button-319的东西。您也可以在按钮中设置其他数据属性，例如 data-id=319 并使用 jQuery attr() 来获取该数据。关键是您需要知道单击了哪个按钮并传递了 id。