Как выбрать переменную href, которая находится в цикле while?

Question

Как выбрать переменную href, которая находится в цикле while?

У меня есть цикл while, который выбирает несколько изображений из базы данных. У меня есть ссылка с href, и при нажатии на нее появляется функция, которая открывает модальное окно для видео. Сейчас он выбирает только первую ссылку href, независимо от того, какая из них выбрана. Как мне убедиться, что это правильный href, а не только первый?

PHP: эта часть работает отлично.

while ($row = $q->fetch()):

?>

<li class="item <?php echo $row['type'];?>"><a href="<?php echo $row['link'];?>" class="test-popup-link">
<?php if($row['img']) { ?>
<img src="upload/videoCovers/<?php echo $row['img'];?>" alt="<?php echo $row['title'];?>">
<?php }
else { ?>
<img src="upload/videoCovers/playBtn.png" alt="<?php echo $row['title'];?>">
<?php } ?>
</a>
</li>

JavaScript:

$(document).ready(function(){
var videoLink = $(".test-popup-link").attr("href");

$('.test-popup-link').magnificPopup({
items: {
src: videoLink
},
type: 'iframe' // this is default type
});
});

1

attr href javascript php

Решение

Другие решения

Позвольте мне указать на несколько проблем в вашем коде

$(document).ready(function(){
var videoLink = $(".test-popup-link").attr("href"); // ( 1 )

$('.test-popup-link').magnificPopup({               //( 2 )
items: {
src: videoLink                                //( 3 )
},
type: 'iframe' // this is default type
});
});

$(".test-popup-link").attr("href"); Вот код $(".test-popup-link") вернет вам все элементы с классом test-popup-link, так что вы получите коллекцию узлов, что нормально. Теперь, когда вы делаете .attr("href") выбирается только первый узел в коллекции и возвращается его ссылка.
Вы пытаетесь применить плагин ко всем элементам с классом test-popup-link что хорошо, если только внутренние конфигурации плагина не совпадают. В вашем случае это меняется в videoLink значение, так что вы не можете использовать его в общем виде. Вы должны использовать цикл, чтобы применить плагин.
Как уже упоминалось выше, ваш videoLink держать только первые элементы HREF и только это первое значение href будет применено ко всем.

Итак Решение будет использовать цикл, чтобы применить плагин. Вот код

$(document).ready(function(){
$.each('.test-popup-link',function() { //looping
$(this).magnificPopup({              // apply to each element in the loop
items: {
src: $(this).attr('href')      // apply its respective href
},
type: 'iframe' // this is default type
});
});
});

0

$('.load-video').on('click', function(e) {
e.preventDefault();

var link = $(this).attr('href');

$('.test-popup-link').magnificPopup({
items: {
src: link
},
type: 'iframe' // this is default type
});
});

добавить класс в тег

<a class="load-video test-popup-link" href="<?php echo $row['link'];?>">

-1

Источник

Accepted Answer

Я ничего не знаю об этом плагине, но вы, вероятно, захотите перебрать все элементы с помощью .test-popup-link класс и вызвать .magnificPopup(), Учтите следующее:

$(document).ready(function(){
$('.test-popup-link').each(function() {
$(this).magnificPopup({
items: {
src: $(this).attr('href')
},
type: 'iframe' // this is default type
});
});
});

редактировать: После быстрого взгляда на Magnific Popup Документация, похоже, что вы также можете использовать следующий пример.

[…] Используйте этот метод, если вы создаете всплывающее окно из списка элементов в одном контейнере. Обратите внимание, что этот метод не включает режим галереи, он просто уменьшает количество обработчиков событий щелчка; каждый элемент будет открыт как одно всплывающее окно

HTML

<div class="parent-container">
<a href="path-to-image-1.jpg">Open popup 1</a>
<a href="path-to-image-2.jpg">Open popup 2</a>
<a href="path-to-image-3.jpg">Open popup 3</a>
</div>

Javascript

$('.parent-container').magnificPopup({
delegate: 'a', // child items selector, by clicking on it popup will open
type: 'image'
// other options
});

Так что в вашем случае вы можете рассмотреть вопрос о ul родитель в ваш список.

3