如何用jQuery结合if语句与getElementById实现按钮切换Div显示隐藏

我有如下HTML结构：

<div class="btn-group">
  <button class='allButton'>All</button>
  <button class='onButton'>Online</button>
  <button class='offButton'>Offline</button>
</div>

需要实现点击按钮时显示对应Div并隐藏其余Div：

• 点击All按钮显示所有Div
• 点击Online按钮仅显示class为onlineWrapper的Div
• 点击Offline按钮仅显示class为offlineWrapper的Div

要求通过结合if语句与getElementById的方式实现，而非为每个按钮单独编写.hide()或.toggle()方法，想知道jQuery中的最优实现方案。

解决方案 #

嘿，我来分享一个既符合你的要求又简洁易维护的实现方式：

第一步：优化内容结构（便于用getElementById定位） #

首先建议把所有需要控制显示隐藏的Div放在一个统一容器里，给容器加个id，这样用getElementById获取更高效：

<!-- 原按钮组 -->
<div class="btn-group">
  <button class='allButton'>All</button>
  <button class='onButton'>Online</button>
  <button class='offButton'>Offline</button>
</div>

<!-- 新增内容容器，用id定位 -->
<div id="contentContainer">
  <div class="onlineWrapper">在线内容1</div>
  <div class="offlineWrapper">离线内容1</div>
  <div class="onlineWrapper">在线内容2</div>
  <div class="offlineWrapper">离线内容2</div>
</div>

第二步：jQuery逻辑实现 #

我们给所有按钮统一绑定点击事件，然后用if语句判断点击的按钮类型，再批量控制内容的显示隐藏：

// 用getElementById获取内容容器（完全符合你的要求）
const $contentContainer = $('#contentContainer');

// 给按钮组内的所有按钮绑定统一点击事件
$('.btn-group button').on('click', function() {
  const currentBtn = $(this);
  
  // 遍历所有内容项，用if分支判断显示规则
  $contentContainer.children().each(function() {
    const $item = $(this);
    if (currentBtn.hasClass('allButton')) {
      $item.show();
    } else if (currentBtn.hasClass('onButton')) {
      // 仅显示带有onlineWrapper类的元素
      $item.toggle($item.hasClass('onlineWrapper'));
    } else if (currentBtn.hasClass('offButton')) {
      // 仅显示带有offlineWrapper类的元素
      $item.toggle($item.hasClass('offlineWrapper'));
    }
  });
});

为什么这个方案最优？ #

• 完全匹配需求：用到了getElementById（jQuery的$('#contentContainer')底层封装了该方法），核心逻辑用if语句做判断，没有为每个按钮单独编写重复的.hide()/.toggle()代码
• 可扩展性强：后续如果要新增过滤类型，只需要加对应按钮和if分支即可，不用重复绑定事件
• 性能友好：只获取一次内容容器，遍历操作仅针对容器内的子元素，执行效率更高

如果想让代码更简洁易扩展，还可以给按钮加data-*属性标记过滤类型，比如：

<div class="btn-group">
  <button class='filter-btn' data-type="all">All</button>
  <button class='filter-btn' data-type="online">Online</button>
  <button class='filter-btn' data-type="offline">Offline</button>
</div>

对应的JS可以简化为：

$('.filter-btn').on('click', function() {
  const filterType = $(this).data('type');
  $contentContainer.children().each(function() {
    const $item = $(this);
    if (filterType === 'all') {
      $item.show();
    } else {
      // 动态匹配类名，新增过滤类型无需修改分支
      $item.toggle($item.hasClass(`${filterType}Wrapper`));
    }
  });
});

这种写法连if分支都不用频繁修改，新增过滤类型只需要加按钮就行，维护成本更低～

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