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
    }
?>

但幻灯片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

您在多个元素中使用相同的ID。为每个元素构建唯一的id。例如。 flip1，flip2等，panel1，panel2等

Answer 2

基于Jack A.回答，首先使用类而不是多个ID构建HTML。然后，在您的脚本中，使用jQuery.next()查找下一个面板元素并切换它：

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

以下是wickham's style guide说明这一点。

Answer 3

您正在创建具有相同ID的多个HTML元素（＆＃34;翻转＆＃34;和＆＃34;面板＆＃34;），这是不正确的; ID应该是唯一的。

另一种方法是使用类而不是ID：

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

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

JavaScript的：

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

这将同时对所有元素起作用。

在元素上运行Jquery Slide Toggle

3 个答案: