JS实现点击Add Photo按钮隐藏自身并显示下一个文件上传div

不用给每个按钮单独绑定ID写重复逻辑，用事件委托就能一次性适配所有按钮，后续新增多少组上传模块都不用修改JS代码。

实现逻辑 #

• 把事件绑定到所有上传模块的公共父容器上，只需要绑定一次，不用逐个给按钮加监听
• 点击事件触发时，先判断点击目标是不是「Add Photo」按钮，非按钮点击直接跳过
• 命中按钮逻辑时：先隐藏当前点击的按钮，再找到按钮所属的当前上传模块，将它的下一个同级上传模块设为显示状态
• 逻辑完全不依赖硬编码的ID匹配，只要上传模块的DOM结构保持一致，自动适配任意数量的上传块

代码实现 #

方案1：兼容现有HTML结构（提前写好隐藏上传块） #

只需要给你现有的三组上传块外面套一层公共父容器，其他原有HTML代码不用做任何修改：

<!-- 套一层公共父容器 -->
<div class="upload-wrapper">
  <!-- 原有三组上传块直接放在这里，内部代码不用改 -->
  <div  class="form-content block"> 
          <div class="one">
              <label>Photo Upload <em class="tooltip">*<span class="tooltiptext">Required</span></em></label>
          </div>
      <div class="two">
              <input type="file" name="FileUpload" checktype="c1">
  <p id="FileUpload_error" style="display: none;">Choose any file for this field.</p>
        <p>Please make sure each photo is 20MB or less, thank you. <button id="btnhide" type="button">Add Photo</button></p>
      </div></div>

  <div  class="form-content block" id="myDIV1" style="display:none;"> 
          <div class="one">
              <label>Photo Upload <em class="tooltip">*<span class="tooltiptext">Required</span></em></label>
          </div>
      <div class="two">
              <input type="file" name="FileUpload1" checktype="c1">
  <p id="FileUpload_error1" style="display: none;">Choose any file for this field.</p>
        <p>Please make sure each photo is 20MB or less, thank you. <button id="btnhide1" type="button">Add Photo</button></p>
      </div></div>

  <div class="form-content block" id="myDIV2" style="display:none;"> 
          <div class="one">
              <label>Photo Upload</label>
          </div>
          <div class="two">
              <input type="file" name="FileUpload2" checktype="c1">
  <p id="FileUpload2_error" style="display:none;">Choose any file for this field.</p>
  <p>Please make sure each photo is 20MB or less, thank you. <button id="btnhide2" type="button">Add Photo</button></p> 
       </div></div>
</div>

替换原来的JS代码为以下内容即可：

// 单次绑定事件到公共父容器
const uploadWrapper = document.querySelector('.upload-wrapper');
uploadWrapper.addEventListener('click', (e) => {
  // 过滤非Add Photo按钮的点击
  if (e.target.tagName !== 'BUTTON' || e.target.textContent.trim() !== 'Add Photo') return;
  // 隐藏当前按钮
  e.target.style.display = 'none';
  // 找到当前所属上传块，显示下一个同级块
  const currentBlock = e.target.closest('.form-content.block');
  const nextBlock = currentBlock.nextElementSibling;
  nextBlock && (nextBlock.style.display = 'block');
});

方案2：动态生成上传块（无需提前写隐藏元素） #

如果不想提前在HTML里堆一堆隐藏的上传块，可以在点击按钮时动态生成新的上传模块，HTML里只需要保留第一组上传块即可，扩展性更强：

<div class="upload-wrapper">
  <!-- 只需要保留第一组上传块，后面的自动生成 -->
  <div  class="form-content block"> 
          <div class="one">
              <label>Photo Upload <em class="tooltip">*<span class="tooltiptext">Required</span></em></label>
          </div>
      <div class="two">
              <input type="file" name="FileUpload" checktype="c1">
  <p id="FileUpload_error" style="display: none;">Choose any file for this field.</p>
        <p>Please make sure each photo is 20MB or less, thank you. <button type="button">Add Photo</button></p>
      </div></div>
</div>

对应JS代码：

const uploadWrapper = document.querySelector('.upload-wrapper');
let uploadIndex = 1; // 记录上传块序号，用于生成name和id

uploadWrapper.addEventListener('click', (e) => {
  if (e.target.tagName !== 'BUTTON' || e.target.textContent.trim() !== 'Add Photo') return;
  // 隐藏当前按钮
  e.target.style.display = 'none';
  // 生成新的上传块
  const newBlock = document.createElement('div');
  newBlock.className = 'form-content block';
  newBlock.innerHTML = `
    <div class="one">
        <label>Photo Upload</label>
    </div>
    <div class="two">
        <input type="file" name="FileUpload${uploadIndex}" checktype="c1">
        <p id="FileUpload${uploadIndex}_error" style="display: none;">Choose any file for this field.</p>
        <p>Please make sure each photo is 20MB or less, thank you. <button type="button">Add Photo</button></p>
    </div>
  `;
  // 把新块插到当前块后面
  e.target.closest('.form-content.block').after(newBlock);
  uploadIndex++;
});

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