javascript - 如果存在则附加 url 参数，如果不存在则添加 jQuery

Question

我正在根据尺寸、颜色等创建过滤器。因此可以选择多个项目。当我单击每个项目时，它应该附加到当前 URL。请检查以下网址，

如果 URL 中不存在参数

http://example.com/category-3?tracker=Q2F0ZWdvcnkgMw&color=White

如果参数存在并且选择相同的颜色

http://example.com/category-3?tracker=Q2F0ZWdvcnkgMw&color=White

如果参数存在并且选择了多种颜色

http://example.com/category-3?tracker=Q2F0ZWdvcnkgMw&color=White-Black

如何使用 jQuery 实现相同的功能。我尝试过使用下面的代码，

function setGetParameter(paramName, paramValue) {
    var url = window.location.href;
    var hash = location.hash;
    url = url.replace(hash, '');
    if (url.indexOf(paramName + "=") >= 0) {
        var prefix = url.substring(0, url.indexOf(paramName + "="));
        var suffix = url.substring(url.indexOf(paramName + "="));
        suffix = suffix.substring(suffix.indexOf("=") + 1);
        suffix = (suffix.indexOf("&") >= 0) ? suffix.substring(suffix.indexOf("&")) : "";
        url = prefix + paramName + "=" + paramValue + suffix + "-";
    } else {
        if (url.indexOf("?") < 0)
            url += "?" + paramName + "=" + paramValue + "-";
        else
            url += "&" + paramName + "=" + paramValue + "-";
    }
    window.location.href = url + hash;
}

上面的代码适用于单个参数值。对于多个值如何更改上述代码。

Answer 1

我建议根本不要使用此代码来构建 URL。
使用类似 https://medialize.github.io/URI.js/ 的内容它恰好有一个 jQuery 插件。
为什么？
您此处的查询参数未进行编码，因此可能会“破坏”网址。使用 URI.js 等库和构建器来附加查询参数将解决您的问题。解析和构建 URL 并不像看起来那么简单，因此最好依赖经过测试的代码。

var url = URI(window.location.href); // no need to remove and add the hash back anymore
var queryMap = url.query(true);
if (queryMap[paramName]) {
    // param already exists
    var values = queryMap[paramName].split('-');
    if (!values.includes(paramValue)) {
        // paramValue not found: add it
        values.push(paramValue);
        url.setQuery(paramName, values.join('-'));
    }
} else {
    // param does not exist yet
    url.setQuery(paramName, paramValue);
}

window.location.href = url.toString();