如何修改JS代码实现关联element全部隐藏时自动隐藏scroller

问题核心原因 #

你现有hidescroller函数存在3个明显错误：

• 条件判断误用了赋值运算符=，而非比较运算符===，导致判断逻辑完全失效
• 循环内每次都会覆盖滚动条的显示状态，最终只匹配最后一个element的显示状态，和「所有关联元素都隐藏才隐藏scroller」的逻辑完全不符
• 没有区分element所属分组，会把所有分组的元素都纳入判断范围

修正方案 #

第一步：给HTML元素加分组标识（方便后续逻辑扩展，避免写死硬编码）

<!-- 给第一组元素加data-group="1" -->
<div class="element" data-group="1">Element 1a</div>
<div class="element" data-group="1">Element 1b</div>
<div class="element" data-group="1">Element 1c</div>
<!-- 给第二组元素加data-group="2" -->
<div class="element" data-group="2">Element 1d</div>
<div class="element" data-group="2">Element 1e</div>
<div class="element" data-group="2">Element 1f</div>

<div class="button" onclick="hide1()">Hide/Unhide 1a,1b,1c</div>
<div class="button" onclick="hide2()">Hide/Unhide 1d,1e,1f</div>
<!-- 给scroller也加对应的data-group="1" -->
<div class="scroller" data-group="1" onclick="scroll1()">Scroll to Element 1</div>

<script>window.onload = hidescroller</script>

注意：window.onload直接赋值函数名即可，不要加括号，加括号会在代码解析时立即执行，而非页面加载完成后执行。

第二步：重写hidescroller函数

function hidescroller() {
  // 获取所有scroller
  const scrollers = document.querySelectorAll('.scroller');
  scrollers.forEach(scroller => {
    // 获取当前scroller关联的分组ID
    const groupId = scroller.dataset.group;
    // 筛选当前分组下所有可见的element
    const visibleElements = [...document.querySelectorAll(`.element[data-group="${groupId}"]`)].filter(el => {
      // 如果是用class控制显隐可以改成!el.classList.contains('自定义隐藏类名')
      return el.style.display !== 'none';
    });
    // 没有可见元素则隐藏scroller，否则显示
    scroller.style.display = visibleElements.length > 0 ? 'block' : 'none';
  });
}

第三步：在显隐函数末尾调用hidescroller

在你现有正常运行的hide1()、hide2()函数的最后一行，加一句hidescroller()，这样每次点击按钮切换元素显隐后，都会自动更新scroller的显隐状态。

如果不想修改HTML加分组标识，也可以直接在函数里写死判断逻辑，比如只统计前3个元素的显隐状态即可，但是扩展性较差，更推荐加分组标识的方案。

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