Question

我正在尝试循环播放一系列视频，并为每个视频创建一个按钮/模态组合。我对id =“myModal”的需求存在问题。每个视频的按钮都链接到同一个视频。我将如何保持这些独特之处？我已经尝试将id更改为class，但这不起作用。

    <?php foreach ($thisVideos as $video):?>
        <button class="btn btn-primary link">Video</button>

        <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    </div>
                    <div class="modal-body">
                        <iframe width="400" height="300" frameborder="0" allowfullscreen=""></iframe>
                    </div>
                </div>
            </div>
        </div>
        <script>
            $('.link').click(function () {
                var src = 'http://www.youtube.com/v/<?=$video["entry_data"]["video-id"]?>';
                $('#myModal').modal('show');
                $('#myModal iframe').attr('src', src);
            });

            $('#myModal button').click(function () {
                $('#myModal iframe').removeAttr('src');
            });
        </script>
    <?php endforeach; ?>

Answer 1

可能对此有所帮助

<?php foreach ($thisVideos as $key=>$video):?>
..............
<div id="myModal_<?php echo $key; ?>" class="modal fade"
....................
..............
<script>
        $('.link').click(function () {
            var src = 'http://www.youtube.com/v/<?=$video["entry_data"]["video-id"]?>';
            $('#myModal_<?php echo $key; ?>').modal('show');
            $('#myModal_<?php echo $key; ?> iframe').attr('src', src);
        });

        $('#myModal_<?php echo $key; ?> button').click(function () {
            $('#myModal_<?php echo $key; ?> iframe').removeAttr('src');
        });
    </script>
   <?php endforeach; ?>

希望你理解并帮助你。
注意这不是一个好方法。它只是解决了你想要的方式。

Answer 2

诀窍是拥有#myModal的唯一ID，这可以通过许多不同的方式完成。

您可以在循环中轻松设置计数器，例如

 $counter = $counter++;

追加

<div id="myModal_<?=$counter?>"

在js中你应该

$('#myModal_<?=$counter?>')

这将为视频按钮链接提供唯一的ID，并且所有视频链接都可以使用。

Answer 3

您的方法是错误的，您只需要一个模态元素和一个脚本（以及一个事件处理程序......），因此您将这些放在循环之外。您可以在视频列表的数据属性中添加网址，然后您可以执行所需的所有操作。

您的代码的一个简单示例：

<?php foreach ($thisVideos as $video): ?>
    <button class="btn btn-primary link"
            data-url="http://www.youtube.com/v/<?=$video["entry_data"]["video-id"]?>">Video</button>
<?php endforeach; ?>


<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="modal-body">
                <iframe width="400" height="300" frameborder="0" allowfullscreen=""></iframe>
            </div>
        </div>
    </div>
</div>
<script>
    $('.link').click(function () {
        // get the url from the data attribute
        var src = $(this).data('url');

        $('#myModal').modal('show');
        $('#myModal iframe').attr('src', src);
    });

    $('#myModal button').click(function () {
        $('#myModal iframe').removeAttr('src');
    });
</script>

Foreach视频创建模态

3 个答案: