无法从PHP加载数据+；JQuery到bootstrap3模式

简单地说，我的站点有一个引导模式，用于显示Youtube视频，如下所示

<!-- Video dialog-->
<div class="modal fade" id="vid-modal">
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
         <div class="modal-title">
             <h4 id="modal-title">Modal title</h4>
         </div>
       </div>
       <div class="modal-body">
          <div class="modal-video">
              <iframe src=""></iframe> <!-- Code for video here -->`
          </div>
       </div>
    </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- End video dialog-->

&时代；
情态标题
`

此模式在用户每次单击链接时显示。这些链接是使用PHP从数据库加载的，代码如下：

<div class="panel-group" id="accordion"> 
<?php 
   $v_units = $courses->get_distinct_unit($id);
   foreach ($v_units as $v_unit) { ?>
     <div class="panel-info">
      <div class="panel-heading">
       <h4 class="panel-title">
         <a data-toggle="collapse" href="#collpase<?php echo $v_unit['unit_id'];?>"><?php echo $v_unit['unit_id'] . ' - ' . $v_unit['unit_name']; ?></a>
       </h4>
      </div> <!-- End of .panel-heading-->
    <div id="collpase<?php echo $v_unit['unit_id'];?>" class="panel-collapse collapse in">
     <div class="panel-body">
       <?php $v_vids = $courses->get_unit_video($v_unit['unit_id']); ?>
       <?php foreach ($v_vids as $v_vid): ?>
           <a class="show-vid-modal" href="<?php echo $v_vid['vid_link']; ?>"><?php echo $v_vid['vid_title'] ?></a>
       <?php endforeach ?>
     </div> <!-- End of .panel-body -->
    </div> <!-- End of .panel-collapse -->
  </div> <!-- End of .panel-default-->
 <?php }?>
</div> <!-- End of #accordion-->

在模态中，为iframe添加一个id，因此它将是：

<iframe id="video-frame" src=""></iframe>

<a class="show-vid-modal" href="#" video-src="<?php echo $v_vid['vid_link']; ?>"><?php echo $v_vid['vid_title'] ?></a>

它可能会工作。
它仍然只显示每个itemFirst的第一个项的数据：我犯了一个错误：jquery变量在javascript中应该是“vidsrc”，而不是“vidsrc”，no“-”。第二：我刚刚在这里复制了准确的代码（只是将“$v_units=$courses->get_distinct_unit（$id）；”改为“$v_units=array（[array]）”，并将“$v_vids=$courses->get_unit_video（$v_unit['unit_id']）”改为“$v_vids=array（[array]）”），效果很好。尝试检查元素，检查每个链接，看看它是否正确填充页面。此外，在启动模式后，检查iframe。让我知道我认为视频链接和标题加载正确，就像我不显示模式，但让用户点击链接，然后它可以导航到正确的Youtube视频。在模态案例中，我进行了检查，iframe的src属性仍然是每个项目的第一个项目的链接，它工作得很好。事实上，第一次，我在按照你的建议编写代码时犯了一些错误。现在一切都好了。非常感谢。
<a class="show-vid-modal" href="#" video-src="<?php echo $v_vid['vid_link']; ?>"><?php echo $v_vid['vid_title'] ?></a>

$('.show-vid-modal').click(function(e) { 
  //here the attribute video-src is helpfull
  var vid-src = $(this).attr('video-src');
  var title = $(this).html();
  e.preventDefault();
  $("#vid-modal").on('show.bs.modal', function(e) {        
    $("h4 #modal-title").text(title);
    //here the id for the iframe is helpfull
    $('#video-frame').attr('src', vid-src);
  });
  $("#vid-modal").modal();
});