基于URL参数使用jQuery为元素添加类名

嘿，我来帮你排查下问题，顺便给你搞定正确的实现方案！

你的代码没生效主要是两个关键问题：

• URL部分获取错误：你用了window.location.pathname，但这个属性是拿URL的路径部分（比如http://your-site.com/about里的/about），而type属于查询参数，得从window.location.search里提取，或者直接用更可靠的参数获取方式。
• switch语句缺少break：每个case后面没加break的话，匹配到第一个case后会继续执行后面的代码，可能导致同时添加两个类，这显然不是你想要的结果。

正确实现方案 #

首先，我们写个简单的函数来获取URL里的指定参数，这样处理多参数场景也更灵活：

function getUrlParam(paramName) {
    // 用URLSearchParams处理查询参数，现代浏览器都支持这个API
    const searchParams = new URLSearchParams(window.location.search);
    return searchParams.get(paramName);
}

然后在DOM加载完成后，拿到type参数的值，再给h1添加对应类名：

$(function() {
    const type = getUrlParam('type');
    
    // 用if-else判断逻辑更直观
    if (type === 'private') {
        $('#head').addClass('private');
    } else if (type === 'retirement') {
        $('#head').addClass('retirement');
    }
});

如果你偏好switch语句，记得一定要加break：

$(function() {
    const type = getUrlParam('type');
    
    switch(type) {
        case 'private':
            $('#head').addClass('private');
            break; // 必须加break，防止执行后续case
        case 'retirement':
            $('#head').addClass('retirement');
            break;
        default:
            // 如果有其他type值，这里可以加默认处理，比如什么都不做
            break;
    }
});

修改后，当URL参数是type=private时，h1会变成：

<h1 id="head" class="page-head private">About Right to Manage for</h1>

当参数是type=retirement时，就会变成：

<h1 id="head" class="page-head retirement">About Right to Manage for</h1>

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