如何动态更改模态内容？

Question

我有数据库列表网页，我在其中列出了有关数据库中内容的各种信息。我也有模态显示与其内容相关的链接。 table

正如你从图片中看到的，我有一个模型，每个模态体都包含一个像“/upload/something.pdf”这样的链接，所以当我点击模态时它会直接显示文档。现在我需要它来显示多个文件。每个链接都有自己的数据库条目，但我不知道每次按下模态底部的数字按钮时如何进行模态更改。我想按 1-2-3，它会根据存储在数据库中的链接更改内容。

modal

这是我的HTML代码

</div>
    <div class="container">
    <table class="table table-bordered">
  <thead class="thead-dark">

                    <tr class="bg-primary text-white">
                        <th>ID</th>
                        <th>Description</th>
                        <th>Location</th>
                        <th>Cost</th>
                        <th>Date</th>
                        <th>Category</th>
                        <th>File</th>
                        <th class="text-center">Action</th>

                    </tr>
                </thead>
                
                <tbody id="dtBasicExample">
                
                    <?php 
                    if(count($userData)>0){
                        $s  =   '';
                        foreach($userData as $val){
                            $s++;
                        if( $val['currency'] == "TL"){
                            $total= $total+ $val['cost'];
                        }
                        if( $val['currency'] == "$"){
                            $total_usd=$total_usd+ $val['cost'];
                        }   
                    ?>
                    <?php 
                    $slash = "/";
                    $date = $val['day'] .$slash .$val['month'] .$slash .$val['year']  ;
                    $link = "uploads" .$slash . $val['file'];
                    ?>

                    <tr>
                        <td><?php echo $val['id'];?></td>
                        <td><?php echo $val['description'];?></td>
                        <td><?php echo $val['location'];?></td>
                        <td><?php echo $val['cost'];if ($val['currency'] == "TL"){echo "₺";} else { echo $val['currency'];}?></td>
                        
                        <td><?php echo $val['datee'];?></td>
                        <td><?php echo $val['type'];?></td>
                        <td><?php 
                        if ($val['file']!= NULL){

                            echo  
                            '<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#MyModal_' . $val['id'] . '">
                             Details
                           </button>';
                        }
                        else {
                            echo '<button type="button" class="btn btn-primary " disabled>Details</button>';
                        }
                       
                          ?>
                        </td>
                        
                          <div id="MyModal_<?php echo $val['id']?>" class="modal fade" role="dialog">
                          <div class="modal-dialog modal-lg" style="max-width: 90%;" role="document">
                              <div class="modal-content">
                                <div class="modal-header">
                                  
                                  <div class="modal-title"><h3>Preview </h3></div>
                                </div>
                                <div class="modal-body">
                                <embed src="<?php echo $link?>" width="850" height="720" />
                                  

                                </div>
                                <div class="modal-footer">
                                
                                <form method="post" action="admin_view">
                                
                                </form>
                                <button type="button" id ="one"  class="btn btn-default" >1</button>
                                <button type="button" id="two" class="btn btn-default" >2</button>
                                <button type="button" id="three" class="btn btn-default" >3</button>
                                <button type="button"  class="btn btn-default" >Download</button>
                                
                                  <button type="button"  class="btn btn-default" data-dismiss="modal">Close</button>
                                </div>
                                
                              </div>
                            </div>
                          </div>
                          
                        </td>
                        <!-- <td id="a1"><a target="_blank" rel="noopener noreferrer" href="<?php echo $link?>" class="text-primary"> Click</a>-->
                        <td align="center">
                            <a href="edit-cost.php?editId=<?php echo $val['id'];?>" class="text-primary"><i class="fa fa-fw fa-edit"></i> Edit</a> | 
                            <a href="delete.php?delcostId=<?php echo $val['id'];?>" class="text-danger" onClick="return confirm('Are you sure to delete this record?');"><i class="fa fa-fw fa-trash"></i> Delete</a>  |
                        </td>

                    </tr>
                    <?php 

                    
                        }
                    }else{
                    ?>
                    <tr><td colspan="8" align="center">No Record(s) Found!</td></tr>
                    <?php }
                    
                     ?>
                    
                </tbody>
            </table>
            <p style="text-align: left;"><?php echo "Total ₺="; echo $total; ?></p>
            <p style="text-align: left;"><?php echo "Total $="; echo $total_usd; ?></p>
        </div> <!--/.col-sm-12-->
        
    </div>
``