如何在选中按钮时隐藏对应关联项？（附PHP代码片段）

To hide the image, name, and description when the "Complete" button is clicked, we need to combine server-side tracking (to remember the task is done) and conditional rendering (to only show elements if the task isn't completed). Here's how to implement it:

Step 1: Update Your Database (Optional but Recommended) #

First, add a boolean column to your Profile table to track if the task is completed. This ensures the state persists across sessions:

ALTER TABLE Profile ADD COLUMN IsTaskCompleted BOOLEAN DEFAULT 0;

Step 2: Modify the PHP Form Handling Code #

We'll update the database to mark the task as completed, fix SQL injection risks, and add a redirect to avoid duplicate submissions:

// Start session to store success message (if not already started)
session_start();

if (isset($_POST['submit']) && ($daysLeft == 7)) {
    // Calculate your updated points (replace with your actual logic)
    $newPoints = // e.g., $currentPoints + 10;

    // Prepare safe update query with parameters to prevent SQL injection
    $stmt = $conn->prepare("UPDATE Profile SET Points=:points, IsTaskCompleted=1 WHERE UserID=:userid");
    $stmt->bindParam(':points', $newPoints);
    $stmt->bindParam(':userid', $UserID);
    $stmt->execute();

    // Store success message in session to display after redirect
    $_SESSION['successMessage'] = "Well done!";

    // Redirect to same page to prevent form resubmission on refresh
    header("Location: " . $_SERVER['PHP_SELF']);
    exit();
}

// Fetch user's task completion status from the database
$stmt = $conn->prepare("SELECT IsTaskCompleted FROM Profile WHERE UserID=:userid");
$stmt->bindParam(':userid', $UserID);
$stmt->execute();
$userData = $stmt->fetch(PDO::FETCH_ASSOC);
$taskCompleted = $userData['IsTaskCompleted'] ?? false;

// Retrieve and clear success message from session
$successMessage = $_SESSION['successMessage'] ?? '';
unset($_SESSION['successMessage']);

Step 3: Conditionally Render Elements in HTML #

Wrap your image, name, description, and "Complete" button in a PHP condition that only shows them if the task isn't completed:

<!-- Show success message if it exists -->
<?php if ($successMessage): ?>
    <p class="success"><?php echo $successMessage; ?></p>
<?php endif; ?>

<!-- Only display task elements if the task hasn't been completed -->
<?php if (!$taskCompleted): ?>
    <div class="task-container">
        <img src="path/to/your/image.jpg" alt="Task Image">
        <h3><?php echo $taskName; ?></h3>
        <p><?php echo $taskDescription; ?></p>

        <!-- The Complete button form -->
        <form method="POST" action="">
            <button type="submit" name="submit">Complete</button>
        </form>
    </div>
<?php endif; ?>

Key Notes: #

• SQL Injection Protection: We replaced the direct UserID=$UserID with a prepared parameter to keep your code secure.
• Persistence: Using the database column ensures the task stays hidden even if the user logs out and back in. If you don't want to modify the database, you could use a session variable instead, but it won't persist across sessions.
• Redirect: The redirect after form submission prevents the user from accidentally resubmitting the form when refreshing the page.

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