Foreach 视频创建模态

Question

我正在尝试循环播放一系列视频并为每个视频创建一个 button/modal 组合。我对 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; ?>

希望你明白，对你有帮助。
注意不是很好way.It只是解决了你想要的方式。

Answer 2

诀窍是为 #myModal 设置一个唯一的 ID，这可以通过多种不同的方式完成。

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

 $counter = $counter++;

附加

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

在 js 中你应该有

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

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

Answer 3

您的方法是错误的，您只需要一个模态元素和一个脚本（以及一个事件处理程序...），所以您将它们放在了循环之外。您可以在视频列表的数据属性中添加 url，然后您就可以做任何您需要做的事情了。

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

<?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 视频创建模态

Foreach video create modal

php

jquery

codeigniter

twitter-bootstrap

bootstrap-modal