如何用一段JavaScript代码批量控制多组Span的显示/隐藏

方案1：利用相邻兄弟元素关系（结构固定时推荐） #

这种方案适合触发按钮和目标区域是直接相邻的场景，无需额外标识，代码最简洁。

修改后的HTML：

<span class="showLoginArea">Login</span> <span class="loginArea">This is Login Area 1</span>
<span class="showLoginArea">Login</span> <span class="loginArea">This is Login Area 2</span>
<span class="showLoginArea">Login</span> <span class="loginArea">This is Login Area 3</span>

对应的JS代码：

jQuery(document).ready(function ($) {
  // 初始化隐藏所有登录区域
  $(".loginArea").hide();
  
  // 给所有触发按钮绑定统一的点击事件
  $(".showLoginArea").click(function(){
    // 找到当前点击按钮的下一个兄弟元素（对应登录区域）并切换显示状态
    $(this).next(".loginArea").toggle();
  });
});

方案2：使用data属性关联（结构灵活时推荐） #

如果触发按钮和目标区域的位置不固定（比如中间隔了其他元素），可以用data-target属性明确关联目标元素，兼容性更强。

修改后的HTML：

<span class="showLoginArea" data-target="loginArea1">Login</span> 
<span id="loginArea1" class="loginArea">This is Login Area 1</span>

<!-- 中间有其他元素也能正常工作 -->
<span class="showLoginArea" data-target="loginArea2">Login</span>
<p>这是中间的其他内容</p>
<span id="loginArea2" class="loginArea">This is Login Area 2</span>

<span class="showLoginArea" data-target="loginArea3">Login</span>
<span id="loginArea3" class="loginArea">This is Login Area 3</span>

对应的JS代码：

jQuery(document).ready(function ($) {
  $(".loginArea").hide();
  
  $(".showLoginArea").click(function(){
    // 获取当前按钮关联的目标元素ID
    const targetId = $(this).data('target');
    // 切换对应目标元素的显示状态
    $(`#${targetId}`).toggle();
  });
});

核心原理说明 #

两种方案都避免了为每个组编写单独的JS逻辑：

• 方案1通过next()方法定位到当前触发按钮的相邻目标元素，依赖固定的DOM结构
• 方案2通过自定义data-target属性建立触发按钮和目标元素的关联，不受DOM结构限制

内容的提问来源于stack exchange，提问作者Mr. Fontastic