javascript - 每次模式打开同一个文件

Question

我有一个问题。我希望我的数据以模式动态查看。当我单击第一个模式按钮时，它会动态打开并显示数据，然后当我单击第二个按钮时，它会显示第一次打开的相同预览数据。重新加载页面后，当我单击第二个按钮时，它会再次动态打开，当我单击第一个按钮时，它会显示第二个模态数据。它的 WordPress 网站。

<a class="book-it-link" href="http://localhost/abc/modal/?id=<?=$row->id?>" data-toggle="modal" data-target="#myModal">Book IT</a>


        <div class="modal booking-modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-body">
                         <?php
           foreach ($query as $row) 
                {   
                //var_dump($row);
                ?>


                        <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        </div>  
                        <div class="row"> 
                            <div class="col-md-12"> 
                                <div class="booking-modal-form">
                                    <form action="">
                                        <div class="form-group"> 
                                            <label>Check-in / Out</label>
                                            <input type="text" class="form-control datepicker" id="datepicker" name="datefilter" placeholder="Check-in / Out">

                                        </div>

                                        <div class="info-text">
                                            <?php echo $row->description ?>
                                        </div>

                                        <div class="book-it-btn">
                                            <button type="submit" class="btn btn-default">Apply</button>
                                        </div>
                                    </form>
                                </div>   
                            </div>
                        </div> 


                    <?php
                }
            ?>  

                    </div>
                </div>
            </div>
        </div>  

Jquery Modal 数据销毁代码:

jQuery('body').on('hidden.bs.modal', '.modal', function () {
        jQuery(this).removeData('bs.modal');
      });

Answer 1

因为您只是重复对话的一部分而不是全部对话试试这个

     <?php
               foreach ($query as $row) 
                    {   
                    //var_dump($row);
                    ?>

<a class="book-it-link" href="http://localhost/abc/modal/?id=<?=$row->id?>" data-toggle="modal" data-target="#myModal<?=$row->id?>">Book IT</a>


    <div class="modal booking-modal fade" id="myModal<?=$row->id?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">



                    <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    </div>  
                    <div class="row"> 
                        <div class="col-md-12"> 
                            <div class="booking-modal-form">
                                <form action="">
                                    <div class="form-group"> 
                                        <label>Check-in / Out</label>
                                        <input type="text" class="form-control datepicker" id="datepicker" name="datefilter" placeholder="Check-in / Out">

                                    </div>

                                    <div class="info-text">
                                        <?php echo $row->description ?>
                                    </div>

                                    <div class="book-it-btn">
                                        <button type="submit" class="btn btn-default">Apply</button>
                                    </div>
                                </form>
                            </div>   
                        </div>
                    </div> 




                </div>
            </div>
        </div>
    </div>  
     <?php
            }
        ?>