时间戳

首页 > 解决方案 > 在 PHP While 循环中显示/隐藏 Div

php - 在 PHP While 循环中显示/隐藏 Div

问题描述

我有一个文件，我在其中循环遍历数据库中的所有事件，然后将它们放在页面上。单击时，我在每个事件 div 的末尾都有一个 div 按钮，我希望打开该特定的 div。没有什么我厌倦的工作，它要么打开每个 div，要么根本不打开。

这是我的用于单击和展开的图标。

echo "<div id='" . $row['Event ID'] . "' class=\"schedcol schedspan_1_of_12 cellalign expand\"><i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i><br><span>EXPAND<span></div>";

这是我想要扩展的代码

echo "<div class=\"list\" style=\"display: none;\">";
    echo "<p> " . $row['First Place'] . ", " . $row['Second Place'] . ", ". $row['Third Place'] . "</p>";
echo "</div>";

这是我的 javascript

    echo "<script>";
        echo "jQuery(document).ready(function(){
            jQuery('#$eventid').on('click', function(event) {        
                jQuery('.list').toggle('show');
            });
        });";
    echo "</script>";

标签： phpjquery

解决方案

您可以添加一个event-row类并将 id 放在一个data-id=""属性中

echo "<div data-id='" . $row['Event ID'] . "' class=\"event-row schedcol schedspan_1_of_12 cellalign expand\"><i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i><br><span>EXPAND<span></div>";

然后在要扩展的 html 中还添加一个data-id=""属性

echo "<div data-id='" . $row['Event ID'] . "' class=\"list\" style=\"display: none;\">";
    echo "<p> " . $row['First Place'] . ", " . $row['Second Place'] . ", ". $row['Third Place'] . "</p>";
echo "</div>";

然后在循环之外你把你的脚本

echo '<script>
    jQuery(".event-row").each(function(){
        const $this = jQuery(this);
        const id = $this.attr("data-id");
        $this.find("span:contains(EXPAND)").click(function() {
            jQuery(".list[data-id="+id+"]").toggle("show");
        });
    });
</script>';

推荐阅读