Question

您好我在PHP中有一个生成的表。代码在每个文件夹视频中查找视频文件夹，并创建一个包含一些数据和视频文件超链接的表格。

<table id="mediatbl">
    <thead>
        <tr>
            <th>Week</th>
            <th>Hall</th>
            <th>Link</th>
            <th>Date</th>
        </tr>
    </thead>
    <tbody>
    <?php
        $directory = "./media/week/";
        $scanned_directory = array_diff(scandir($directory), array('..', '.'));
        // Scan all weekly folders
        foreach ($scanned_directory as &$week) 
        {
            $mediafiles = $directory."/".$week;
            // Scan all the mediafiles in the weekly folder
            $dir = new DirectoryIterator($mediafiles);

            foreach ($dir as $fileinfo) 
            {
                if (!$fileinfo->isDot()) 
                {
                    $mediafile=$fileinfo->getFilename();
                    echo "<tr>
                            <td>$week</td>
                            <td>Unknown</td>
                            <td>
                                <a class=\"btn\" data-popup-open=\"popup-1\" href=\"#\">$mediafile</a></p>
                            </td>
                            <td>Unknown</td>
                        </tr>";

                }
            }
        }
    ?>

我在网上发现了一些不错的代码片段触发了一个div弹出窗口。

<div class="popup" data-popup="popup-1">
    <div class="popup-inner">
        <p><a data-popup-close="popup-1" href="#">Close</a></p>
        <a class="popup-close" data-popup-close="popup-1" href="#">x</a>
    </div>
</div>

<script>    
    $(function() {
        //----- OPEN
        $('[data-popup-open]').on('click', function(e)  {
            var targeted_popup_class = jQuery(this).attr('data-popup-open');
            $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);

            e.preventDefault();
        });

        //----- CLOSE
        $('[data-popup-close]').on('click', function(e)  {
            var targeted_popup_class = jQuery(this).attr('data-popup-close');
            $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
            e.preventDefault();
        });
    });
</script>

有一些CSS，但我认为它不会对答案做出贡献（我可能错了）。我想要实现的只是将文件的链接传递到弹出窗口中，不是很好玩，它可以是HTML5视频标签或其他任何东西。我已经摆弄了一段时间，我找不到办法让它发挥作用。我的javascript技能很低，我想了解更多。

有没有人有个好主意？解？指针？提前谢谢。

Answer 1

它可能对你有所帮助（因为长篇文章我不能把它写成评论）

将您的开放代码块更改为：

//----- OPEN
    $('[data-popup-open]').on('click', function(e)  {
        var targeted_popup_class = jQuery(this).attr('data-popup-open');
        var targeted_popup_link = jQuery(this).attr('href');
        $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
        $('[data-popup="' + targeted_popup_class + '"]').append('<video controls="controls" width="400" height="280"><source type="video/mp4" src="'+targeted_popup_link+'"></video>');

        e.preventDefault();
    });

我想在用户点击特定链接后在div弹出窗口中播放视频

1 个答案: