javascript - 在放大的弹出窗口中显示动态内容
问题描述
我正在尝试做一个动态内容放大弹出窗口。
这是我当前的代码。
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.
})
由于我使用的宏伟弹出窗口仅根据标签和 JavaScript 中id
给定的内容打开内容id
,因此如果我有不同的内容,则id
仍然保持不变,并且按钮只会一遍又一遍地打开相同的内容,id
因为相同的。因为我得到的内容来自数据库,所以我不能一遍又一遍地复制代码,只能id
在静态页面中更改类似内容。
我究竟做错了什么?
解决方案
问题是您的循环中没有计数器。此外,您不需要id
for 调用magnificPopup
,而是使用class
for 动态。
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.
})
推荐阅读
- python - 在熊猫中处理日期时间列
- python - 如何将蓝图中的自定义装饰器定义调用到 Flask 应用程序中的另一个
- python-3.x - 如何在 opencv python 项目中使用完整的 GPU 加速?
- webpack - 删除并重新安装 node_modules 后,Vue cli 4.51 构建问题
- django - Django certbot 安装
- tensorflow - Tensorflow - 如何通过调整 .config 文件仅增加我的数据的一部分?
- android - 如何清除以前在自定义 ImageView android 上绘制的画布?
- logging - 将 pyspark stderr 从控制台写入特定目录中的日志文件
- flutter - 为什么 GestureDetector 不能在颤振中工作?
- r - 在特定值之后逐行转换为 NA