我有一个接收动态数据mysql数据库的无序列表,该列表返回一些带有标题缩略图和每个视频的完整视图的youtube链接,我制作了一个简单的脚本,显示并使用css disply none和显示块隐藏div这个div将接收链接,它将显示视频,我的问题是只有第一个播放按钮隐藏并显示div,其他按钮动态创建而不工作。
这是我的HTML和PHP通过
接收数据库<div id="player"></div>
<div class="divvideos">
<ul>
<?php while($videolist = $resultvideos->fetch_array()){ ?>
<li class="listdivvideos">
<button class="btplay" id="btplay"></button>
<img src="images/datahoraicon.png" class="imgdatahora">
<ul>
<li><img src="http://i1.ytimg.com/vi/<?php echo $videolist['miniatura'] ?>/default.jpg"></li>
</ul>
</li>
<?php } ?>
</ul>
</div>
这是显示和隐藏div播放器的简单脚本
<script>
$("#btplay").click(function () {
if($("#player").css("display") == "none")
$("#player").css("display","block");
else
$("#player").css("display","none");
});
</script>
我的代码正常工作通过单击隐藏ID btplay的按钮并显示带有id播放器的div,我唯一的问题是这个按钮被创建了几次,因为它是在Home行中创建的,它返回了虽然只有primero按钮隐藏并显示div其他按钮不起作用
答案 0 :(得分:2)
首先,您的 ID 应唯一(如上所述)。把它们留下来或添加一个计数器(最好不要把它们拿出来)。
$(".btplay").click(function () {
应该成功。
提普:你可以替换
<?php while($videolist = $resultvideos->fetch_array()){ ?>
//...
<?php } ?>
与
<?php while($videolist = $resultvideos->fetch_array()): ?>
//...
<?php endwile; ?>
并且
<?php echo $videolist['miniatura'] ?>
与
<?= $videolist['miniatura']; ?>
我认为它使它更具可读性,但它只是一个tipp。