我实际上是在尝试为我的页面建立一个过滤器。首先，我已经使用$_SESSION进行了尝试，但是我也会尝试通过URL进行尝试，以便检查哪种方法对我更有效。通过$_SESSION编写的代码并不是那么难于编程，但是现在通过URL中的GET编写，我不再继续。
这是我的计划：
我的网站上有两个类别，其中有未定义的复选框。例如：
Color: Red, Blue, Green
Size: XL, L, M, S
每个值（如红色）都是一个复选框。因此，结果是我需要设置两个URL参数：
http://www.localhost.com/?color=
http://www.localhost.com/?size=
注意： 勾选复选框后，应将参数设置为URL，而无需刷新页面！
现在对我来说，它变得越来越复杂。假设用户点击了该网站，然后选中了Red复选框，则网址应如下所示：
http://www.localhost.com/?color=Red
到目前为止，一切都很好。但是用户也决定按Green，因此我需要检查参数是否已给定，并将新值逗号分隔到现有参数之后。结果就是这样：
http://www.localhost.com/?color=Red,Green
当他现在勾选一个尺寸时，我的当前代码出现了问题，因为该代码只是删除了URL中的颜色参数。因此，当用户勾选L时，我需要在JS中检查参数是否也存在，并执行与颜色相同的操作，因此URL必须如下所示：
http://www.localhost.com/?color=Red,Green&size=L, ......
思路： 但是，如果用户先选择尺寸然后选择颜色，该怎么办？因此，我需要根据顺序用?或&动态地附加参数。
删除值：
因此，假设用户取消选中颜色Green，我需要将其从URL中删除，以便使URL再次如下所示：
http://www.localhost.com/?color=Red
在删除Red值之后，由于没有剩余值，必须完全删除该参数。必须使用URL中的其他参数完成相同的操作。
我在此页面上找到了我的过滤器的确切行为，但是他们使用+对其进行了分隔，而更改(By the way I don't need this for a shop so I can't use this plugin and buy it!)并不难。我曾尝试分析该页面上的JS，但这对我来说很沉重：
https://plugins.yithemes.com/yith-woocommerce-ajax-product-filter/shop/
这是我的部分代码，但我现在不提出了：
$(document).ready(function () {
$(document).on('click', '.filter-menu li', function () {
var filter_value = $(this).find('.menu-data-inner');
var is_active = false;
if (filter_value.parent().hasClass('active')) {
var is_active = true;
}
if (filter_value !== '') {
if ($(this).closest('.filter').attr('id') === 'color-filter') {
var filter_exists = checkFilterParamExists('color');
if (!is_active) {
$(filter_value.parent()).addClass('active');
if (!filter_exists) {
history.pushState(null, null, '?color=' + filter_value.attr('data-value'));
} else {
history.pushState(null, null, window.location.search + ',' + filter_value.attr('data-value'));
}
} else {
$(filter_value.parent()).removeClass('active');
}
} else if ($(this).closest('.filter').attr('id') === 'size-filter') {
var filter_exists = checkFilterParamExists('size');
if (!is_active) {
$(filter_value.parent()).addClass('active');
if (!filter_exists) {
history.pushState(null, null, '?size=' + filter_value.attr('data-value'));
} else {
history.pushState(null, null, window.location.search + ',' + filter_value.attr('data-value'));
}
} else {
$(filter_value.parent()).removeClass('active');
}
}
}
});
});
function checkFilterParamExists(field) {
var url = window.location.href;
if (url.indexOf('?' + field + '=') != -1)
return true;
else if (url.indexOf('&' + field + '=') != -1)
return true;
return false
}body {
margin-bottom: 0 !important;
}
.filter-container {
position: relative;
}
.filter-form {
background: lightblue;
position: relative;
display: flex;
display: -ms-flexbox;
}
.filter {
display: inline-flex;
display: -ms-inline-flexbox;
flex-direction: column;
}
.filter-toggle {
position: relative;
padding: 15px 55px 15px 30px;
cursor: pointer;
font-weight: 600;
}
.filter-menu {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 8px 0 rgba(0, 0, 0, 0.12);
padding: 0;
position: absolute;
transition: all 0.3s ease;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
min-width: 200px;
left: 0;
z-index: 1;
background-color: #ffffff;
font-weight: normal;
}
.filter-toggle:hover > ul.filter-menu {
transform: scale(1) !important;
}
li {
list-style-type: none;
}
.filter-menu-data {
display: flex;
display: -ms-flexbox;
position: relative;
padding: 10px 30px 10px 30px;
}
.menu-data-inner {
display: block;
padding-right: 12px;
}
.filter-menu li:hover {
background-color: lightgreen;
}
.filter-menu li div::after {
content: "☐";
position: absolute;
right: 15px;
font-size: 18px;
top: 10px;
}
.filter-menu li div.active::after {
content: "☑";
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filter-container">
<form class="filter-form" method="get">
<div id="color-filter" class="filter">
<div class="filter-toggle">
Colors
<ul class="filter-menu">
<li>
<div class="filter-menu-data ">
<span class="menu-data-inner" data-value="Green">Green</span>
</div>
</li>
<li>
<div class="filter-menu-data active">
<span class="menu-data-inner" data-value="Red">Red</span>
</div>
</li>
</ul>
</div>
</div>
<div id="size-filter" class="filter">
<div class="filter-toggle active">
Sizes
<ul class="filter-menu">
<li>
<div class="filter-menu-data">
<span class="menu-data-inner" data-value="XL">XL</span>
</div>
</li>
<li>
<div class="filter-menu-data active">
<span class="menu-data-inner" data-value="L">L</span>
</div>
</li>
</ul>
</div>
</div>
</form>
</div>
您能教我如何更好，更彻底地做到这一点吗？因为我的代码仍然是半途而废。预先感谢！