我正在尝试做一个动态内容放大弹出窗口。
这是我当前的代码。
if ($queryResult > 0) {
while ($row = mysqli_fetch_assoc($result)) {
echo "<div class='hvrbox'>
<img src='image/".$row['mImage']."' alt='' class='hvrbox-layer_bottom' />
<div class='hvrbox-layer_top'>
<a href='#posterVid1' class='posterbtn1' id='posterLink1'>Play Trailer</a>
<div id='posterVid1' class='mfp-hide' style='max-width: 75%; margin: 0 auto;'>
<iframe width='853' height='480' src='".$row['mLink']."' frameborder='0' allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>
</div>
<a class='posterbtn2' href='movie-detail.php?name=".$row['mName']."'>Movie Details</a>
<div class='hvrbox-text'>Me Before You</div>
</div>
</div>";
}
}
这是javascript
$('#posterLink1, #posterLink2, #posterLink3')
.magnificPopup({
type:'inline',
midClick: true // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.
})
由于我使用的放大弹出窗口只打开基于id标签和JavaScript中给定的id的内容，如果我有不同的内容，id仍然保持不变，按钮只反复打开相同的内容，因为id是相同的。因为我得到的内容来自数据库，所以我不能一次又一次地复制代码，只能像在静态页面中那样更改id。
我做错了什么？
问题是循环中没有计数器。此外，您不需要id来调用magnificPopup，而是使用class进行动态调用。
PHP:
if ($queryResult > 0) {
$ctr = 1;
while ($row = mysqli_fetch_assoc($result)) {
echo "<div class='hvrbox'>
<img src='image/".$row['mImage']."' alt='' class='hvrbox-layer_bottom' />
<div class='hvrbox-layer_top'>
<a href='#posterVid".$ctr."' class='posterbtn1'>Play Trailer</a>
<div id='posterVid".$ctr."' class='mfp-hide' style='max-width: 75%; margin: 0 auto;'>
<iframe width='853' height='480' src='".$row['mLink']."' frameborder='0' allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>
</div>
<a class='posterbtn2' href='movie-detail.php?name=".$row['mName']."'>Movie Details</a>
<div class='hvrbox-text'>Me Before You</div>
</div>
</div>";
$ctr++;
}
}
Javascript：
$('.posterbtn1')
.magnificPopup({
type:'inline',
midClick: true // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.
})