如何高效控制页面中多个图表与Div的显示隐藏？

作为JS新手碰到这种维护性问题太正常了！你的核心痛点是硬编码每个元素的显隐逻辑，随着页面元素增多，代码会变得臃肿不堪，而且极易出错。咱们可以用「统一逻辑+解耦关联」的思路来重构，让代码更干净、易维护。

1. 先把显隐逻辑交给CSS（基础优化） #

别直接操作元素的style.display，用CSS类来统一控制显隐，这样更灵活也更符合前端最佳实践：

首先定义两个CSS类：

/* 默认隐藏类 */
.card-hidden {
  display: none !important;
}
/* 显示类 */
.card-visible {
  display: block;
}

然后修改你的HTML，把原来的display:none替换成card-hidden类，比如：

<div id="btnCurrentStatID" class="card ShowHide card-hidden" style="float:right;width:20%;height:350px;">
<!-- 其他卡片同理 -->

接下来写一个通用的切换函数，不用再一个个写hide()/show()：

/**
 * 切换卡片显隐：隐藏所有卡片，只显示目标卡片/卡片组
 * @param {string} targetSelector - 要显示的元素选择器
 */
function toggleCardVisibility(targetSelector) {
  // 先隐藏所有需要控制的卡片
  $('.card').addClass('card-hidden');
  // 再显示目标元素
  $(targetSelector).removeClass('card-hidden').addClass('card-visible');
}

现在你原来的那段繁琐代码：

$(".ShowHide").css("display", "block"); $("#subcatNameChartSectionID").hide(); $("#subcatErrorChartSectionID").hide(); $("#subCatIdnameSectionID").hide(); $("#subCatITurNameSectionID").hide();

可以简化成一行：

toggleCardVisibility('.ShowHide');

2. 用数据属性绑定按钮与卡片（优雅解耦） #

如果按钮和卡片是一一对应的关系，用HTML的data-*属性来关联它们，彻底告别硬编码的ID绑定：

修改按钮的HTML，给每个按钮加上data-target属性，值为对应卡片的选择器：

<button type="button" id="btnErrorStat" class="btnsForCrew-Common" data-target="#faultStatChartID"></button>
<button type="button" id="btnIdle" class="btnsForCrew-Common" data-target="#pieChartID"></button>
<button type="button" id="btnService" class="btnsForCrew-Common" data-target="#btnCurrentStatID"></button>
<!-- 其他按钮同理 -->

然后只需要给所有按钮绑定一次点击事件，不用再给每个按钮单独写逻辑：

// 给所有控制按钮绑定统一的点击事件
$('.btnsForCrew-Common').on('click', function() {
  // 获取当前按钮对应的目标卡片选择器
  const targetCard = $(this).data('target');
  // 调用通用切换函数
  toggleCardVisibility(targetCard);
});

好处：以后新增按钮和卡片，只要给按钮加data-target属性就行，完全不用修改JS代码，实现了HTML和JS的解耦！

3. 进阶：用状态变量管理复杂场景 #

如果页面有更复杂的逻辑（比如多组卡片切换、需要记住当前激活状态），可以用一个状态变量来跟踪当前显示的卡片，避免重复操作：

// 记录当前激活的卡片选择器
let activeCardSelector = null;

function showTargetCard(targetSelector) {
  // 如果点击的是当前已激活的卡片，直接返回，避免重复操作
  if (activeCardSelector === targetSelector) return;

  // 隐藏之前激活的卡片
  if (activeCardSelector) {
    $(activeCardSelector).addClass('card-hidden');
  }

  // 显示目标卡片
  $(targetSelector).removeClass('card-hidden').addClass('card-visible');
  
  // 更新激活状态
  activeCardSelector = targetSelector;
}

// 绑定按钮事件
$('.btnsForCrew-Common').on('click', function() {
  showTargetCard($(this).data('target'));
});

这种方式不仅提升了性能，还能让逻辑更清晰，后续扩展多分组、批量切换等功能也更容易。

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