单击生成的按钮,而循环不起作用

时间:2016-06-21 08:06:44

标签: javascript php jquery html css

我有一个接收动态数据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其他按钮不起作用

1 个答案:

答案 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。