PHP 中如何比较 POST 值的 ID 和 HTML 元素的 ID-html教程-PHP中文网

PHP 中如何比较 POST 值的 ID 和 HTML 元素的 ID

霞舞

发布： 2025-10-21 08:29:08

原创

218人浏览过

php 中如何比较 post 值的 id 和 html 元素的 id

本文旨在讲解如何在 PHP 中获取通过 POST 方法传递的按钮值，并将其与 HTML 元素的 ID 进行比较，从而动态地修改元素的属性。我们将提供清晰的代码示例和解释，帮助你理解并实现这一功能。

在 Web 开发中，经常需要根据用户的交互动态地改变页面元素的状态。一个常见的场景是，点击按钮后，根据按钮的值来改变特定元素的属性，例如显示或隐藏某个 div 元素。在 PHP 中，这通常涉及到获取通过 POST 方法传递的按钮值，并将其与 HTML 元素的 ID 进行比较。

下面将详细介绍如何实现这一功能，并提供示例代码和注意事项。

获取 POST 值

首先，需要获取通过 POST 方法传递的按钮值。PHP 提供了 $_POST 超全局变量来访问 POST 数据。为了避免未定义的索引错误，可以使用空合并运算符 ?? 来提供一个默认值。

立即学习“PHP免费学习笔记（深入）”；

腾讯元宝

腾讯混元平台推出的AI助手

223

查看详情

<?php
  $ariabool = true;
  $gridclass = "gridhidden";
  $element_id = $_POST['expand'] ?? '';

  // 现在 $element_id 包含了 POST 请求中 'expand' 字段的值，如果 'expand' 字段不存在，则 $element_id 的值为 '' (空字符串)。
?>

登录后复制

比较 POST 值和 HTML 元素 ID

接下来，需要将获取到的 POST 值与 HTML 元素的 ID 进行比较。在这个例子中，假设 HTML 元素的 ID 存储在一个变量 $row['id'] 中。

<?php
    // 假设 $row['id'] 包含了 HTML 元素的 ID
    $element_id = $_POST['expand'] ?? '';
    if ($element_id === $row['id']) {
        $gridclass = 'gridexpanded';
        $ariabool = false;
    } else {
        $gridclass = 'gridhidden';
        $ariabool = true;
    }
?>

登录后复制

HTML 结构

HTML 结构如下所示，其中按钮的 value 属性对应于 div 元素的 id 属性。

<div class='kagrid'>
    <div class='griddisplay'>
        <img src={$row['img']} />
        <h2>{$row['name']}</h2>
        <div>{$row['primpro']}</div>
        <a href={$row['src']}>Image Source</a>
        <button type='button' class='expand' name='expand' value={$row['id']}></button>
    </div>
    <div id={$row['id']} class='$gridclass' aria-hidden='$ariabool'>
        <div class='gridcell bold'>Nicknames</div>
        <div class='gridcell'>{$row['nicknames']}</div>
        <div class='gridcell bold'>Pronouns</div>
        <div class='gridcell'>{$row['pronouns']}</div>
        <div class='gridcell bold'>Typical Age</div>
        <div class='gridcell'>{$row['age']}</div>
        <div class='gridcell bold'>Source(s)</div>
        <div class='gridcell'>{$row['source']}</div>
        <div class='gridcell bold'>Role(s)</div>
        <div class='gridcell'>{$row['role']}</div>
        <div class='gridcell bold'>Terms</div>
        <div class='gridcell'>{$row['terms']}</div>
        <div class='bold desc gridcell'>Description</div>
        <div class='desc gridcell'>{$row['description']}</div>
    </div>
</div>

登录后复制

完整示例

将上述代码片段整合，可以得到一个完整的示例：

<?php
    $ariabool = true;
    $gridclass = "gridhidden";
    $element_id = $_POST['expand'] ?? '';

    // 假设 $row['id'] 包含了 HTML 元素的 ID，且数据已经从数据库中获取
    // 例如：$row = $result->fetch_assoc();

    if ($element_id === $row['id']) {
        $gridclass = 'gridexpanded';
        $ariabool = false;
    } else {
        $gridclass = 'gridhidden';
        $ariabool = true;
    }
?>

<div class='kagrid'>
    <div class='griddisplay'>
        <img src="<?php echo $row['img']; ?>" />
        <h2><?php echo $row['name']; ?></h2>
        <div><?php echo $row['primpro']; ?></div>
        <a href="<?php echo $row['src']; ?>">Image Source</a>
        <button type='button' class='expand' name='expand' value="<?php echo $row['id']; ?>"></button>
    </div>
    <div id="<?php echo $row['id']; ?>" class='<?php echo $gridclass; ?>' aria-hidden='<?php echo $ariabool; ?>'>
        <div class='gridcell bold'>Nicknames</div>
        <div class='gridcell'><?php echo $row['nicknames']; ?></div>
        <div class='gridcell bold'>Pronouns</div>
        <div class='gridcell'><?php echo $row['pronouns']; ?></div>
        <div class='gridcell bold'>Typical Age</div>
        <div class='gridcell'><?php echo $row['age']; ?></div>
        <div class='gridcell bold'>Source(s)</div>
        <div class='gridcell'><?php echo $row['source']; ?></div>
        <div class='gridcell bold'>Role(s)</div>
        <div class='gridcell'><?php echo $row['role']; ?></div>
        <div class='gridcell bold'>Terms</div>
        <div class='gridcell'><?php echo $row['terms']; ?></div>
        <div class='bold desc gridcell'>Description</div>
        <div class='desc gridcell'><?php echo $row['description']; ?></div>
    </div>
</div>

登录后复制