jQuery实现按钮点击控制元素显隐 切换低序号自动移除高序号元素

现有代码仅实现了「显示小于等于当前点击序号的元素」逻辑，缺失了「隐藏大于当前点击序号的高序号元素」的步骤，因此点击低序号按钮回退时，之前已经显示的高序号元素不会被移除。

仅需要在原有点击事件逻辑中，补充对高序号元素的隐藏处理即可，核心逻辑是通过jQuery的slice(c)选中所有索引从c开始的高序号add-item元素，为其添加inactive类实现隐藏。

修复后完整代码 #

CSS 样式 #

.active {
  display: block;
  background-color: blue;
}
.inactive {
  display: none;
}

HTML 结构 #

<button class="child-item click-item-1">Click 1</button>
<button class="child-item click-item-2">Click 2</button>
<button class="child-item click-item-3">Click 3</button>
<button class="child-item click-item-4">Click 4</button>
<button class="child-item click-item-5">Click 5</button>

<div class="add-item inactive">Add 1</div>
<div class="add-item inactive">Add 2</div>
<div class="add-item inactive">Add 3</div>
<div class="add-item inactive">Add 4</div>
<div class="add-item inactive">Add 5</div>

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

JS 交互逻辑 #

let clickItem;
for (let c = 1; c < 6; c++) {
  clickItem = document.getElementsByClassName('click-item-' + c);
  $(clickItem).on('click', function() {
    // 切换按钮激活态
    $('.child-item').not(this).removeClass('active');
    $(this).addClass('active')
    // 保留当前序号及之前的元素显示
    $(".add-item").slice(0, c).removeClass("inactive");
    // 隐藏所有序号高于当前点击值的元素
    $(".add-item").slice(c).addClass("inactive");
  })
}

• 点击按钮5时，所有5个add-item元素都移除inactive类，正常展示5个新增元素
• 后续点击click3按钮时，前3个add-item保持显示，第4、5个add-item被加上inactive类隐藏，完全符合预期效果

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