javascript - 在 while 元素上运行 Jquery Slide Toggle

Question

我在运行 jquery 时遇到问题。这是表格示例:

table database
id  | name  | value
1     data1   10
2     data2   20
3     data3   30
4     data4   40
5     data5   50

这是我的代码:

    <?php
    $sql    = "SELECT * FROM database ORDER BY id"
    $result = $conn->query($sql);

    while($row  = $result->fetch_assoc())
    {?>
        <div id="flip">
            <?php echo $row['name']?>
        </div>

        <div id="panel">
            <?php echo $row['value']?>
        </div>
        <?php
    }
?>

但是 slide toogle jquery 只在第一个元素上执行一次。如何让滑动切换在循环时执行每一行？这是我的 slidetoggle()Jquery:

    <script> 
$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideToggle("slow");
    });
});
</script>

还有 CSS:

<style> 
#panel, #flip {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
}

#panel {
    padding: 50px;
    display: none;
}
</style>

Answer 1

根据 Jack A. answer，首先使用类而不是多个 ID 构建您的 HTML。然后，在您的脚本中，使用 jQuery.next() 找到下一个面板元素并切换它:

$(document).ready(function(){
    $(".flip").click(function(){
        $(this).next('.panel').slideToggle("slow");
    });
});

这是一个jsfiddle说明这一点。