Javascript jQuery：设置url参数，附加到它，添加新参数并从中删除

实际上，我正在尝试为我的页面构建一个过滤器。首先，我用

$\u SESSION

尝试过它，但我也会尝试通过URL来做，以检查什么对我更有效。通过

$\u SESSION

编程并不难，但现在通过

在URL中获取

，我就不提了

---

这是我的计划：

我在我的网站上有两个类别，其中有未定义数量的复选框。例如：

Color: Red, Blue, Green
Size: XL, L, M, S

每个值（如红色）都是一个复选框。因此，我需要设置两个URL参数：

http://www.localhost.com/?color=
http://www.localhost.com/?size=

---

注意： 勾选复选框后，应将参数设置为URL，而不刷新页面

现在对我来说越来越复杂了。假设用户点击站点并勾选复选框

Red

，URL应如下所示：

http://www.localhost.com/?color=Red

http://www.localhost.com/?color=Red,Green&size=L, ......

到目前为止还不错。但是用户决定也按

绿色

，因此我需要检查参数是否已经给定，并将新值逗号附加到现有参数。这就是结果：

http://www.localhost.com/?color=Red,Green

---

当他现在勾选一个大小时，我的当前代码有问题，因为这个代码只是删除了URL中的颜色参数。因此，当用户勾选

L

时，我需要在JS中检查参数是否也存在，并对颜色执行相同的操作，因此URL必须如下所示：

http://www.localhost.com/?color=Red

http://www.localhost.com/?color=Red,Green&size=L, ......

想：但是如果用户先勾选尺寸，然后勾选颜色怎么办？因此，我需要根据顺序使用

？

或

&

动态附加参数

删除值：

---

假设用户取消勾选颜色

绿色

，我需要将其从URL中删除，使URL看起来像这样：

http://www.localhost.com/?color=Red

删除

红色

值后，必须完全删除该参数，因为没有剩余值。URL中的其他参数也必须执行相同的操作

我在这个页面上找到了我的过滤器的确切行为，但是他们用一个

+

来分隔它，这并不难改变

（顺便说一句，我不需要这个商店，所以我不能使用这个插件并购买它！）

。我试着分析那里页面上的

JS

，但这对我来说太沉重了：

这是我的部分工作代码，但我现在不出来了：

---

$（文档）.ready（函数（）{
$（文档）。在（'单击'，'上。筛选菜单li'，函数（）{
var filter_value=$（this）.find（'.menu-data-inner'）；
var为活跃=虚假；
if（filter_value.parent（）.hasClass（'active'））{
var为激活=真；
}
如果（筛选值！=''）{
if（$（this）.closest（'.filter'）.attr（'id'）=='color filter'））{
var filter_exists=checkFilterParamExists（'color'）；
如果（！处于活动状态）{
$（filter_value.parent（））.addClass（'active'）；
如果（！filter_存在）{
pushState（null，null，'？color='+filter_value.attr（'data-value'）；
}否则{
history.pushState（null，null，window.location.search+'，'+filter_value.attr（'data-value'））；
}
}否则{
$（filter_value.parent（））.removeClass（'active'）；
}
}else if（$（this）.closest（'.filter'）.attr（'id'）==='size filter'））{
var filter_exists=checkFilterParamExists（'size'）；
如果（！处于活动状态）{
$（filter_value.parent（））.addClass（'active'）；
如果（！filter_存在）{
history.pushState（null，null，'？size='+filter_value.attr（'data-value'）；
}否则{
history.pushState（null，null，window.location.search+'，'+filter_value.attr（'data-value'））；
}
}否则{
$（filter_value.parent（））.removeClass（'active'）；
}
}
}
});
});
函数checkFilterParamExists（字段）{
var url=window.location.href；
如果（url.indexOf（“？”+字段+“=”）！=-1）
返回true；
else if（url.indexOf（'&'+field+'='）！=-1）
返回true；
返回错误
}

正文{
页边距底部：0！重要；
}
.过滤容器{
位置：相对位置；
}
.过滤形式{
背景：浅蓝色；
位置：相对位置；
显示器：flex；
显示：-ms flexbox；
}
.过滤器{
显示：内联flex；
显示：-ms内联flexbox；
弯曲方向：立柱；
}
.过滤器切换{
位置：相对位置；
填充：15px 55px 15px 30px；
光标：指针；
字号：600；
}
.过滤器菜单{
盒影：02px4px0rgba（0,0,0,0.16），02px8px0rgba（0,0,0,0.12）；
填充：0；
位置：绝对位置；
过渡：所有0.3秒缓解；
-webkit变换：缩放（0）；
变换：比例（0）；
-webkit转换原点：0；
变换原点：0；
最小宽度：200px；
左：0；
z指数：1；
背景色：#ffffff；
字体大小：正常；
}
.过滤器切换：悬停>ul.过滤器菜单{
转变：尺度（1）！重要；
}
李{
列表样式类型：无；
}
.筛选菜单数据{
显示器：flex；
显示：-ms flexbox；
位置：相对位置；
填充：10px 30px 10px 30px；
}
.菜单数据内部{
显示：块；
右侧填充：12px；
}
.filter菜单li：悬停{
背景颜色：浅绿色；
}
.filter菜单li div:：after{
内容：“☐";
位置：绝对位置；
右：15px；
字号：18px；
顶部：10px；
}
.filter菜单li div.active:：after{
内容：“☑";
}

颜色


绿色