如何用JavaScript实现多表单的显示与隐藏切换功能

问题说明 #

需要编写JavaScript代码，实现点击页面按钮时，仅切换与按钮ID匹配的表单的显示/隐藏状态。页面默认显示4个按钮，表单默认隐藏，点击对应按钮仅切换对应表单。

原代码存在的问题 #

1. 大小写不匹配：JavaScript中获取元素时使用了错误的大小写（如_("VideoBtn")对应HTML中的videoBtn，_("VideoForm")对应HTML中的videoForm），导致无法正确获取元素。
2. 判断逻辑错误：将e.target.id（字符串）与DOM元素变量（如catBtn）进行比较，条件永远不成立。
3. 最后一个判断错误：误将prodForm（表单元素）作为判断条件，实际应该判断按钮IDprodBtn。
4. 缺少默认隐藏表单的样式：没有设置表单默认隐藏的CSS规则。

修正后的完整代码 #

HTML

<div class="new__btn">
  <button id="catBtn">New Category</button>
</div>
<div class="new__btn">
  <button id="blogBtn">New Blog</button>
</div>
<div class="new__btn">
  <button id="videoBtn">New Video</button>
</div>
<div class="new__btn">
  <button id="prodBtn">New Product</button>
</div>

<div id="catForm" class="form-container">
  Hide or show this div for the categories
  <div class="panel">
    <div class="panel__head">Panel Head</div>
    <div class="panel__body">Panel Body</div>
    <div class="panel__footer">Panel Footer</div>
  </div>
</div>

<div id="blogForm" class="form-container">
  Hide or show this div for the blogs
  <div class="panel">
    <div class="panel__head">Panel Head</div>
    <div class="panel__body">Panel Body</div>
    <div class="panel__footer">Panel Footer</div>
  </div>
</div>

<div id="videoForm" class="form-container">
  Hide or show this div for the videos
  <div class="panel">
    <div class="panel__head">Panel Head</div>
    <div class="panel__body">Panel Body</div>
    <div class="panel__footer">Panel Footer</div>
  </div>
</div>

<div id="prodForm" class="form-container">
  Hide or show this div for the products
  <div class="panel">
    <div class="panel__head">Panel Head</div>
    <div class="panel__body">Panel Body</div>
    <div class="panel__footer">Panel Footer</div>
  </div>
</div>

CSS

/* 默认隐藏所有表单容器 */
.form-container {
  display: none;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #eee;
}

/* 显示表单的类 */
.form-container.show {
  display: block;
}

.new__btn {
  margin: 5px 0;
}

JavaScript

// 简化的元素获取函数
function _(id) {
  return document.getElementById(id);
}

// 监听全局点击事件
document.addEventListener('click', function(e) {
  // 判断点击的元素是否是目标按钮（ID以Btn结尾）
  const btnId = e.target.id;
  if (btnId.endsWith('Btn')) {
    // 从按钮ID推导对应表单的ID：将Btn替换为Form
    const formId = btnId.replace('Btn', 'Form');
    const targetForm = _(formId);
    if (targetForm) {
      // 切换显示/隐藏类
      targetForm.classList.toggle('show');
      console.log(`切换${formId}的显示状态`);
    }
  }
});

代码说明 #

1. CSS：通过.form-container类默认隐藏表单，添加.show类时显示表单，同时增加基础样式提升可读性。
2. JavaScript：
   • 利用按钮ID的命名规律（xxxBtn对应xxxForm），动态推导表单ID，避免冗余的if-else判断。
   • 使用classList.toggle方法一键切换显示/隐藏状态，代码简洁高效。
   • 增加元素存在性判断，防止因ID错误导致的控制台报错。

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