如何通过ID使用HTMX实现HTML元素的显示与隐藏？

针对你的需求，这里提供几种无需修改innerHTML、直接控制整个div显示/隐藏的HTMX实现方案：

方案一：纯前端客户端控制（最简单） #

不需要后端接口，直接通过HTMX绑定点击事件，配合CSS类切换显示状态：

首先定义基础CSS：

.hidden {
  display: none;
}

然后编写按钮和目标div：

<button hx-on:click="document.getElementById('ticket_comments_{{ comment.id }}').classList.toggle('hidden')">
  {{ form_visible ? '隐藏评论表单' : '显示评论表单' }}
</button>

<div id="ticket_comments_{{ comment.id }}" class="{{ form_visible ? '' : 'hidden' }}">
  <!-- 你的添加评论表单 -->
  <form hx-post="/submit-comment/{{ comment.id }}">
    <textarea name="comment_content" placeholder="输入你的评论..." required></textarea>
    <button type="submit">提交评论</button>
  </form>
</div>

这种方式完全在客户端完成状态切换，适合不需要后端同步状态的场景。

方案二：后端同步状态（刷新页面保持状态） #

如果需要后端记录表单的显示状态（比如用户刷新页面后保持当前显示/隐藏状态），可以用HTMX的OOB（Out of Band）交换功能：

前端代码 #

<button hx-get="/toggle-comment-form/{{ comment.id }}" hx-swap="outerHTML">
  {{ form_visible ? '隐藏表单' : '显示添加评论表单' }}
</button>

<div id="ticket_comments_{{ comment.id }}" class="{{ form_visible ? '' : 'hidden' }}">
  <form hx-post="/submit-comment/{{ comment.id }}">
    <textarea name="comment_content" placeholder="输入评论..." required></textarea>
    <button type="submit">提交</button>
  </form>
</div>

后端响应示例（以Python Flask为例） #

后端处理/toggle-comment-form/<comment_id>请求，更新状态后返回OOB片段：

<!-- 替换按钮文本 -->
<button hx-get="/toggle-comment-form/{{ comment.id }}" hx-swap="outerHTML">
  {{ '显示添加评论表单' if form_visible else '隐藏表单' }}
</button>

<!-- OOB交换：更新目标div的类 -->
<div id="ticket_comments_{{ comment.id }}" class="{{ '' if form_visible else 'hidden' }}" hx-swap-oob="true">
  <!-- 保持原表单结构不变，仅更新显示类 -->
  <form hx-post="/submit-comment/{{ comment.id }}">
    <textarea name="comment_content" placeholder="输入评论..." required></textarea>
    <button type="submit">提交</button>
  </form>
</div>

这种方案会同步后端状态，用户刷新页面后能保持之前的显示/隐藏状态。

方案三：后端触发客户端脚本 #

如果需要后端执行某些逻辑后再切换显示，可以让后端返回OOB脚本控制DOM：

前端代码 #

<button hx-get="/toggle-comment/{{ comment.id }}" hx-swap="none">
  切换评论表单
</button>

<div id="ticket_comments_{{ comment.id }}" class="hidden">
  <form hx-post="/submit-comment/{{ comment.id }}">
    <textarea name="comment_content" placeholder="输入评论..." required></textarea>
    <button type="submit">提交</button>
  </form>
</div>

后端响应 #

<script hx-swap-oob="true">
  const targetDiv = document.getElementById('ticket_comments_{{ comment.id }}');
  targetDiv.classList.toggle('hidden');
</script>

这种方式适合需要后端先完成权限校验、数据更新等操作后，再触发显示/隐藏的场景。

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