为何我的jQuery仅执行第一个if语句，其余语句无响应？

你的代码核心问题是仅在DOM初始化时执行一次检查，当后续通过交互切换slide（让其他div获得slide--current类）时，这段逻辑不会重新运行，所以body的类不会更新。哪怕改用else if，也解决不了执行时机的问题。

另外原代码存在重复操作（反复添加/移除相同类），可以优化逻辑。

修复步骤 #

1. 将类更新逻辑封装成独立函数，方便重复调用
2. 在页面初始化时调用一次，同时在slide切换的触发事件中重新调用该函数
3. 优化类操作：先统一移除所有目标类，再添加对应类，避免冗余代码

优化后的代码示例 #

function updateBodySlideClass() {
    // 先移除所有关联的body类，避免重复判断
    $('body').removeClass('mobile-app web-app design-app');

    // 获取当前激活的slide元素
    const activeSlide = $('div.slide--current');
    if (!activeSlide.length) return;

    // 根据当前slide的data-content值添加对应类
    const contentType = activeSlide.data('content');
    switch (contentType) {
        case 'content-1':
            $('body').addClass('mobile-app');
            break;
        case 'content-2':
            $('body').addClass('web-app');
            break;
        case 'content-3':
            $('body').addClass('design-app');
            break;
    }
}

$(document).ready(function() {
    // 页面初始化时执行一次
    updateBodySlideClass();

    // 监听slide切换的触发事件，这里需要根据你的slide实现调整事件逻辑
    // 示例1：如果是点击切换按钮触发
    $('.slide-switch-btn').on('click', function() {
        // 若slide有切换动画，需等待动画完成后再执行（根据实际动画时长调整延时）
        setTimeout(updateBodySlideClass, 150);
    });

    // 示例2：如果是基于CSS过渡动画，监听过渡结束事件
    $('div[data-content^="content-"]').on('transitionend', function() {
        updateBodySlideClass();
    });
});

额外排查点 #

• 检查你的slide切换逻辑，确保同一时间只有一个div拥有slide--current类，如果多个元素同时有这个类，会导致逻辑判断混乱
• 确认选择器div[data-content='content-X']能正确匹配到目标元素，可以在浏览器控制台用$("div[data-content='content-2']")测试是否返回正确元素

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