html - jQuery 在 <div> 上切换不起作用

Question

<script>
    $(document).ready(
    function(){
        $("#music").click(function () {
            $("#musicinfo").toggle("slow");
        });

    });
</script>

我使用此代码来显示和隐藏 div，但我只能单击第一个 div，第二个则不起作用。

这是div:

<?php
    foreach($result as $tile)
    {?>
        <div id="music">
            <?php echo $tile['Onderwerp']?>
        </div>
        <div id="musicinfo">
            <?php echo $tile['Omschrijving']?>
        </div>
<?php }?>

我试图将 mysql 中的信息放入 2 个 div 中，1 个用于标题，1 个用于单击标题 div 时可以看到的信息>.

Answer 1

您在循环中使用相同的 ID，这是错误的，所有事件仅适用于第一个 ID，而其他事件将被忽略。

foreach ($result as $title) { ?>
    <div class='wrapper'>
       <div class='music'></div>
       <div class='musicInfo'></div>
    </div>
<?php } ?>

jQuery 函数看起来像这样:

$('.music').click(function() {
     $(this).parent().find('.musicInfo').toggle();
});