模态 window 仅从每个循环的 PHP 中的第一条记录中提取信息

Question

我有一个带有 foreach 循环的页面，它显示一组公园的数据。 foreach 循环运行良好。在该循环中，我有一个按钮，您按下该按钮可获得模态 window 以显示有关该公园的其他信息。按钮本身知道它在循环中的位置（我用一个变量标记它作为测试）但是当模态 window 打开时它只显示第一条记录的信息。

foreach ($showresult as $display)
{
$display_result[] = array        ('parkid' =>$display['parkid'],
                                    'trailsys' =>$display['trailsys'],
                                    'state' =>$display['state'], 
                                    'trailset' =>$display['trailset'],
                                    'name' =>$display['name'], 
                                    'description' =>$display['description'], 
                                    'url' =>$display['url'], 
                                    'ldes' =>$display['ldes'],
                                    'ltxt' =>$display['ltxt'],
                                    'address' =>$display['address'], 
                                    'city' =>$display['city'], 
                                    'zip' =>$display['zip'], 
                                    'phone' =>$display['phone'], 
                                    'pos' =>$display['pos'],    
                                    'T1' => $display['T1'],
                                    'T2'=> $display['T2']);}

$states = get_states($variable);
    foreach ($states as $staterow) {
        $state_set[] = array ('id' =>$staterow['id'],
                                  'st' =>$staterow['st'],
                                      'state' =>$staterow['state'],
                                      'reg' =>$staterow['reg']);
    }
?>


<html>
    <head>
...
</head>
    <body>

...


<?php foreach ($display_result as $parkrow) {   ?>
        <!-- FEATURES HEADING -->
        <div class="row" id="featuresHeading">      
            <div class="col-12">    
<h2> <?php echo $parkrow['T1']; ?> </h2>
<h2 id="subtitle"><?php echo $parkrow['T2']; ?></h2>
<p class="lead"> <?php echo $parkrow['description']; ?> </p> 
            </div><!--close col-12 -->
        </div><!-- close featuresHeading -->

        <!-- PANEL GROUP -->

<div id="dom-target" visibility: hidden> 
<?php $output = $parkrow['description'];
      echo htmlspecialchars($output); ?>
</div>

        <!-- PANEL 1 -->
        <div class="row" id="features">
            <div class="row">
                <div class="col-sm-4 feature">
                    <div class="panel">
                        <div class="panel-heading">
                            <h3 class="panel-title"><?php echo "location of " . $parkrow['name']; ?></h3>
                            <button type="button" class="btn btn-primary" data-toggle="modal" 
                            data-target="#exampleModal" data-whatever="<?php $parkrow ?>">Open modal for <?php echo
                             $parkrow['name']; ?></button>
                        </div><!-- close panel-heading -->
                            <img src="images/placeholder.jpg" alt="placeholder">
                            <p>Click Here for Location</p>
                    </div><!-- close panel -->
                </div><!-- close col-sm-4 -->

...

        <!-- MODAL WINDOW -->
            <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4>This is a test</h4>
                            </div><!-- close modal-header -->

                            <div class="modal-body">
                                <form>
                                    <div class="form-group">
                                        <label for="recipient-name" class="control-label">Recipient:</label>
                                        <input type="text" class="form-control" id="$name">
                                    </div><!-- close form-group -->

                                    <div class="form-group">
                                        <label for="message-text" class="control-label">Message:</label>
                                        <textarea class="form-control" id="message-text"></textarea>
                                    </div><!-- close form-group -->
                                </form><!-- close form -->
                            </div><!-- close modal-body -->

                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary">Send message</button>
                            </div><!-- close modal-footer -->
                        </div><!-- close modal-content> -->
                </div><!-- close modal-dialog -->
            </div><!-- close modal -->  

<?php
unset($parkrow);
 } ?>    ...

和JavaScript：

$('#exampleModal').on('show.bs.modal', function (event) {

    var div = document.getElementById("dom-target");
    var myData = div.textContent;
  var button = $(event.relatedTarget) 
  var recipient = button.data('whatever') 
  var modal = $(this)
  modal.find('.modal-header').text('New message to ' + recipient)
  modal.find('.modal-body input').val(myData)
})

查看实际效果：http://www.ride4wheel.com/test_site/ride.php?id=pa

Answer 1

您在 html 中多次使用 DOM-ID“#exampleModal”。
你应该只有一个 #exampleModal 然后像你一样更新它。
因此，将 'Model' 置于 php 循环之外！

Answer 2

  <div class="container">
     <div class="container pb-video-container rounded">
        <h2>&nbsp;&nbsp;<img src="./image/play.jpg" alt=".." width="2.4%" height="5%" style="border-radius:20%;"> Derniers Films </h2> 
        <!-- ************************************************************************************************ -->
        <?php 
           include_once "./inc/ViewMain.php";

           $currentViewer = new ViewMain;
           $rslt = $currentViewer->viewAll();
           foreach($rslt as $elm) {
        ?> 
        
        <div class="movie-card card col-sm-3 col-md-3 pb-video">
           <div class="margPadCard pb-video">
              <div  class="modal fade" id="<?= $elm["idf"] ;?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                 <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                       <div class="modal-body mb-0 p-0 iframe">
                          <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
                             <iframe class="embed-responsive-item" src="<?= $elm["video"] ;?>" autoplay=0 mute=1 volume="0" frameborder="0" allowfullscreen></iframe>
                          </div>
                       </div>                        
                    </div>
                 </div>
              </div>
              <a href="#">
                 <img src="<?= $elm["pochette"] ;?>" class="img-fluid z-depth-1 card-img-top" data-toggle="modal" data-target="#<?= $elm["idf"] ;?>" alt="..." width="100%" height="340">
              </a>
           
              <div class="pmain movie-content pb-video">
                 <div class="movie-titleC movie-content-header">
                    <a href="#">  <h4 class="text-center form-control label-warning"><b><?php echo $elm["titre"] ;?></b></h4>  </a>
                    <div class="imax-logo"></div>
                 </div>
                 <div class="movie-info">
                    <div class="info-section">
                       <label><?php echo $elm["realisateur"] ;?></label>
                    </div>
                    <div  class="row">
                       <div class="info-section col-sm-6">
                          <label><?php echo $elm["pays"] ;?></label>  <span> - <?php echo $elm["langue"] ;?></span>
                       </div>
                       <div class="info-section text-right col-sm-5">
                          <label><?php echo $elm["categorie"] ;?></label>
                       </div>
                    </div>
                 </div>
              </div>
           </div>
        </div>

https://wpbeaches.com/creating-a-loop-of-bootstrap-modals/?unapproved=318184&moderation-hash=e1deea02c06790e5ed1e1b0b5ff16e31#comment-318184

模态 window 仅从每个循环的 PHP 中的第一条记录中提取信息

Modal window only pulling information from first record in a PHP for each loop

javascript

foreach

modal-dialog

twitter-bootstrap-3