如何优化菜单项增删active、check类的jQuery代码，避免使用nth-child？

核心优化逻辑 #

• 抛弃硬编码的if分支和nth-child选择器，通过data-target属性直接匹配对应菜单项，后续新增步骤无需修改JS逻辑
• 类操作逻辑统一封装，代码精简度大幅提升
• 支持用prevAll()批量处理历史步骤的check类状态，符合你的需求

优化后完整代码 #

$(document).ready(function () {
  prevPageButtons();
});

function prevPageButtons() {
  $("body").on("click", ".prev-page-btn", function (e) {
    const target = $(this).data('target');
    const $container = $('#get_content');
    // 获取所有菜单项
    const $allMenuItems = $(".test-sidebar .menus li");
    // 直接通过data-target定位当前要激活的菜单项
    const $activeMenuItem = $allMenuItems.has(`a[data-target="${target}"]`);

    // 加载内容
    $container.load(target + '.php');

    // 处理类状态
    $allMenuItems.removeClass('active');
    // 当前激活项设置
    $activeMenuItem.removeClass('check').addClass('active');
    // 如需给所有已完成的历史步骤自动加check类，放开下面一行注释即可
    // $activeMenuItem.prevAll().addClass('check').removeClass('active');
  });
}

额外说明 #

如果后续要加next按钮的逻辑，也可以复用这套匹配逻辑，只需要改按钮的data-target值即可，完全不用调整菜单项选择逻辑。

内容的提问来源于stack exchange，提问作者laurence keith albano