如果存在，则追加url参数;如果不存在，则添加jQuery

Question

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

If parameter not exists in URL

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

If parameter exists and selected same color

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

If parameter exists and selected multiple colors

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插件
为什么
此处的查询参数未编码，因此可能会"破坏"url。使用像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();