Foreach видео создать модал
Я пытаюсь перебрать массив видео и создать кнопку / модальное комбо для каждого. У меня проблема с необходимостью для id = «myModal». Кнопка каждого видео ссылается на одно и то же видео. Как бы мне сохранить эти уникальные? Я пытался изменить id на класс, но это не сработало.
<?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; ?>
Решение
Ваш подход неверен, вам нужен только один модальный элемент и один скрипт (и один обработчик событий …), поэтому вы помещаете их вне цикла. Вы можете добавить 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>
Другие решения
Может быть, это поможет вам
<?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; ?>
Надеюсь, вы понимаете, и это поможет вам.
Заметка Это не очень хороший способ. Он просто решает так, как вы хотите.
Хитрость заключается в том, чтобы иметь уникальный идентификатор для #myModal и это может быть сделано разными способами.
Вы можете легко установить счетчик в вашем цикле, например,
$counter = $counter++;
присоединять
<div id="myModal_<?=$counter?>"и в JS вы должны иметь
$('#myModal_<?=$counter?>')
Это даст уникальную идентификацию ссылки на кнопку видео, и все ссылки будут работать.