javascript - 未点击时显示 div 元素的点击功能

Question

我有一个正在创建的管理面板。我有一个左侧面板部分，然后是单击面板按钮时显示 div 的右侧。我创建了一个 fiddle 来展示它的样子并帮助我解释这一点......

https://jsfiddle.net/jq8c51c9/

在 Fiddle 中它正常工作，但我删除了我所有的 php.ini 文件。问题出在 Announcements div 周围，它显示了其下的联盟会费 div。此外，一旦您单击公告，然后单击另一个面板按钮，如果我再次单击公告，唯一会显示的是这个..

Announcements Current Announcements
League Dues

同样，这不是在 Fiddle 中执行此操作。

这是问题所在区域的完整代码。我一直坚持这个问题，无法弄清楚为什么只有这两个 div 会遇到困难。

有人知道我做错了什么吗？

公告

try {
    //Prepare
     $con = mysqli_connect("localhost", "", "", "");
     if ($user_stmt = $con->prepare("SELECT `id` FROM users")) {

        $user_stmt->execute();
        $user_stmt->bind_result($user_id); 

        if (!$user_stmt) {
            throw new Exception($con->error);
        }
        $user_stmt->store_result();
         $user_result = array();
                 //while ($user_row = $user_stmt->fetch()) {
?>               
     <div class="announcement_success"></div>
            <p>Add New Announcement</p>
                <form action="" method="POST" id="insert_announcements">
                <input type="hidden" value="<?php echo $userid; ?>" id="approved_id" name="user_id" />
                    <textarea rows="4" cols="50" id="announcement_message" name="message" class="inputbarmessage" placeholder="Message" required></textarea>
                    <label for="contactButton">
                        <button type="button" class="contactButton" id="submit_announcement">Add Announcement</button>
                    </label>
                </form>
<?php

    if ($announcements_stmt = $con->prepare("SELECT * FROM announcements")) {

        $announcements_stmt->execute();
        $announcements_stmt->bind_result($announcements_id, $announcements_user_id, $announcements_messages, $announcements_date); 

        if (!$announcements_stmt) {
            throw new Exception($con->error);
        }
        $announcements_stmt->store_result();
         $announcements_result = array();

?>

            Current Announcements
            <table>
                <tr>
                    <th>ID</th>
                    <th>Username</th>
                    <th>Message</th>
                    <th>Date</th>
                </tr>   
<?php
        while ($row = $stmt->fetch()) {
?>
                <tr>
                    <td><?php echo $announcements_id; ?></td>
                    <td><?php echo $announcements_username; ?></td>
                    <td><?php echo $announcements_messages; ?></td>
                    <td><?php echo $announcements_date; ?></td>
                </tr>   
            </table>
<?php
        }  
    }
}
}
    catch (Exception $e)
    {
        echo "Error: " . $e->getMessage();
    }   
?>          
            </div>
            <div id='dues'>League Dues</div>
        </div>

Answer 1

构建公告表时出错。 闭幕</table>标记在 while 循环内，因此 html 将被搞砸，使关闭表之后的所有内容都消失。

因此将 while 循环更改为:

....
<?php
    while ($row = $stmt->fetch()) {
?>
            <tr>
                <td><?php echo $announcements_id; ?></td>
                <td><?php echo $announcements_username; ?></td>
                <td><?php echo $announcements_messages; ?></td>
                <td><?php echo $announcements_date; ?></td>
            </tr>   
<?php
    }
?>
    </table>
<?php
....

无论如何，我建议先在一个变量中构建您的 html，然后再将其一起输出。这使得代码更清晰，并降低了 html 标签不一致的风险。与 HEREDOC 一起使用时，您甚至不必为引号烦恼。

在你的情况下，它可能看起来像这样:

<?php

$table_head = <<<EOT 
             <tr>
                <th>ID</th>
                <th>Username</th>
                <th>Message</th>
                <th>Date</th>
            </tr>
EOT;

$table_content = "";

while ($row = $stmt->fetch()) {
    $table_content.= <<<EOT
            <tr>
                <td>$announcements_id</td>
                <td>$announcements_username</td>
                <td>$announcements_messages</td>
                <td>$announcements_date</td>
            </tr>   
EOT;

}

$announcement_table = "<table>".$table_head.$table_content."</table>";

echo $announcement_table;