在 laravel 中无法以模态获取数据源答案

【问题标题】：can't get data-source in modal in laravel在 laravel 中无法以模态获取数据源
【发布时间】：2021-06-05 08:04:48
【问题描述】：

我正在尝试在我的模式中获取 data-src（来自数据库的 youtube 链接）值，但它没有获取 .到目前为止我的代码：

来自控制器：

foreach($ondemand_data as $row)
   {
    $ondemand_output .= '

                <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
                   <div class="aspire-video-content">
                       <div class="aspire-video-thumb">
                           <img src="../storage/webinar/'.$row->image.'" alt="" class="img- 
                     thumbnail">
                           <div class="aspire-video-thumb-content">
                               <button type="button" class="btn video-btn" data-toggle="modal" 
                                 data-src="'.$row->video_link.'" data-target="#myModal">
                                   <img src="../img/video/video-img.png" alt="">
                               </button>
                           </div>
                       </div>
                       <div class="aspire-video-txt-content">
                           <div class="aspire-video-txt" style="height: 160px">
                               '.str_limit($row->description, 180).'
                           </div>
                           <input type="text" value="'.$row->video_link.'" class="" id="get- 
                          video-url">
                           <button type="button" class="btn video-btn aspire-video-btn" data- 
                          toggle="modal" data-src="'.$row->video_link.'" data- 
                    target="#myModal">
                               Watch Now
                           </button>
                       </div>
                   </div>
               </div> 
           ';
   }
  }

我的脚本中的代码是（脚本来自刀片页面）：

    <script>
    $(document).ready(function() {
     
        var $videoSrc;
        $('.video-btn').click(function() {
            $videoSrc = $(this).data("src");
        });
        console.log($videoSrc);
         
        $('#myModal').on('shown.bs.modal', function (e) {
        
            $("#video").attr('src',$videoSrc + "? 
         autoplay=1&amp;modestbranding=1&amp;showinfo=0" );
        })
       
        $('#myModal').on('hide.bs.modal', function (e) {
            
            $("#video").attr('src',$videoSrc);
        })
           
    });
</script>

如果您需要更多代码以进行更好的分析，请询问我

【问题讨论】：

$videoSrc = $(this).attr("data-src");
制作 print_r($ondemand_data) 会得到什么
@JohnLobo，不起作用
@BernhardBeatus 它从数据库中获取 url，但不获取 modal
$(document).click('.video-btn',function() { $videoSrc = $(this).attr("data-src"); });

标签： php jquery laravel

【解决方案1】：

看到这个小提琴：https://jsfiddle.net/bogatyr77/bqm2nLaf/7/
Youtube 在 Stackoverflow 中不工作

替换

src="https://www.youtube.com/embed/RydO8iGhwEY"

与

src="' . $row->video_link . '"

然后制作

foreach($ondemand_data as $row) {
    $unique = uniqid();
    .....
}

替换

data-target="#exampleModal-' . $unique . '"
id="exampleModal-' . $unique . '"

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
<div class="aspire-video-txt">
  <p>Your Description</p>
</div>
<div>
  <img src="https://via.placeholder.com/150">
</div>
<input type="text" value="https://www.youtube.com/embed/RydO8iGhwEY" class="" id="get-video-url">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Watch now
</button>


<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <iframe width="100%" height="300" src="https://www.youtube.com/embed/RydO8iGhwEY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
    </div>
  </div>
</div>

【讨论】：