使用jQuery实现点击按钮切换textarea显示/隐藏（支持多次复用）

需要实现点击按钮时切换对应textarea的显示与隐藏状态，且该功能需支持无限制多次复用。以下是当前使用的HTML结构及尝试的jQuery脚本，无法正常实现功能，需排查修正。

原HTML结构 #

<div class="input-group mb-3">
    <input type="text" name="tname[]" class="form-control" required placeholder="req. for">
    <button class="btn btn-outline-secondary buttonMultipleNameReq" type="button" id="button-addon2"><i class="bi bi-plus-circle"></i></button>
</div>
<textarea class="form-control" id="multipleNameReq"></textarea>

原尝试的jQuery脚本 #

$('body').on('click', '.buttonMultipleNameReq',function(){
    const element1 = $(this);
    const target1 = element1.parent().parent().find("#multipleNameReq");
    console.log(target1);

    if (target1.style.display === "none") {
    target1.style.display = "block";
    } else {
    target1.style.display = "none";
    }
})

问题排查 #

1. ID重复问题：id="multipleNameReq"是唯一标识，复用DOM结构时会出现重复ID，导致元素查找混乱。
2. jQuery对象操作错误：target1是jQuery对象，不能直接使用原生DOM的.style属性，需用jQuery专属方法操作。
3. 元素查找路径不可靠：原代码通过parent().parent()查找父级，DOM结构变动时会失效；复用后也无法精准定位当前按钮对应的textarea。

修正方案 #

修正后的HTML结构（支持无限复用） #

给每组表单添加独立容器，将textarea的ID改为class，移除按钮的重复ID：

<!-- 第一组 -->
<div class="form-group-item">
  <div class="input-group mb-3">
    <input type="text" name="tname[]" class="form-control" required placeholder="req. for">
    <button class="btn btn-outline-secondary buttonMultipleNameReq" type="button">
      <i class="bi bi-plus-circle"></i>
    </button>
  </div>
  <!-- 默认隐藏textarea -->
  <textarea class="form-control multipleNameReq" style="display: none;"></textarea>
</div>

<!-- 可无限添加更多组 -->
<div class="form-group-item">
  <div class="input-group mb-3">
    <input type="text" name="tname[]" class="form-control" required placeholder="req. for">
    <button class="btn btn-outline-secondary buttonMultipleNameReq" type="button">
      <i class="bi bi-plus-circle"></i>
    </button>
  </div>
  <textarea class="form-control multipleNameReq" style="display: none;"></textarea>
</div>

修正后的jQuery脚本 #

$('body').on('click', '.buttonMultipleNameReq', function() {
  // 精准定位当前按钮所属组内的textarea
  const targetTextarea = $(this).closest('.form-group-item').find('.multipleNameReq');
  // 一键切换显示/隐藏状态
  targetTextarea.toggle();
});

修正说明 #

• 新增.form-group-item容器，确保每个按钮仅操作自身组内的textarea，完美支持无限复用。
• 替换textarea的ID为class，彻底避免ID重复问题。
• 使用closest()方法查找最近的父容器，再定位目标textarea，路径更稳定，不受DOM层级小变动影响。
• 用jQuery内置的toggle()方法直接切换显示隐藏，替代手动判断display属性，代码更简洁可靠。

内容的提问来源于stack exchange，提问作者Aldrin John Villasis