如何仅用PHP为指定ID的<li>元素通过按钮添加类

核心思路 #

由于禁止使用JavaScript和MySQL，只能通过PHP的$_SESSION会话存储暂存已标记完成的项ID，页面刷新后通过会话状态判断是否给对应<li>添加类名。

具体步骤 #

1. 在页面最顶部启动PHP会话，用于保存已完成项的ID集合
2. 统一处理doneButton的POST请求，将提交的项ID存入会话数组
3. 渲染<li>元素时，检查当前项ID是否在会话的已完成数组中，若存在则追加目标类名（例如done）

修改后的完整代码 #

<?php
// 启动会话，必须放在输出之前
session_start();

// 统一处理doneButton的POST请求，放在循环外避免重复处理
if(isset($_POST['doneButton'])) {
    // 初始化会话数组，若不存在则创建
    if(!isset($_SESSION['completed_items'])) {
        $_SESSION['completed_items'] = [];
    }
    $item_id = $_POST['doneButton'];
    // 避免重复添加
    if(!in_array($item_id, $_SESSION['completed_items'])) {
        $_SESSION['completed_items'][] = $item_id;
    }
    // 重定向避免表单重复提交
    header("Location: list-notes.php");
    exit;
}

// 处理deleteButton的逻辑也移到循环外
if(isset($_POST['deleteButton'])){
    db_remove_note($_POST['deleteButton']);
    // 如果删除的项在已完成列表中，同步移除
    if(isset($_SESSION['completed_items'])) {
        $key = array_search($_POST['deleteButton'], $_SESSION['completed_items']);
        if($key !== false) {
            unset($_SESSION['completed_items'][$key]);
        }
    }
    header("Location: list-notes.php");
    exit;
}
?>

<ul class='wrapper'> 
<?php foreach ($items as $item) : 
    // 判断当前项是否已完成，生成对应的类名
    $li_class = "note";
    if(isset($_SESSION['completed_items']) && in_array($item['id'], $_SESSION['completed_items'])) {
        $li_class .= " done";
    }
?>
    <li class="<?= $li_class ?>" id='<?= $item['id'] ?>'>
        <div class="details">
            <p><?= $item['title']."<span class='currentDate'>".$item['currentDate']."</span>"?></p>
            <p class ="importance"><?= $item['importance'] ?></p>
            <div class="border"></div>
            <span><?= $item['text'] ?></span>
        </div>
        <div class="bottom-content">
            <span>Do: <?= date('d.m.Y', strtotime($item['date'])) ?></span>

            <form method="post">
            <button name="doneButton" value='<?= $item['id'] ?>' type="submit">✅</button>
            </form>

            <form method="post" >
            <button value="<?= $item['id'] ?>" name="deleteButton" type="submit">🗑️</button>
            </form>
            
        </div>
    </li>
<?php endforeach; ?>
</ul>

说明 #

• 会话$_SESSION['completed_items']会存储所有被标记为完成的项ID，只要会话未过期（浏览器未关闭），状态就会保留
• 处理POST请求后执行重定向，避免用户刷新页面时重复提交表单
• 删除项时同步移除会话中的对应ID，保证状态一致性

内容的提问来源于stack exchange，提问作者Daeweed Lee