通过单击按钮从搜索查询中添加和删除

Question

我在搜索结果页面上设置了一个过滤器，使用户能够按他们正在寻找的酒店类型缩小搜索范围。唯一的问题是它只是添加到搜索字符串中，因此他们点击的酒店类型越多，查询的时间就越长，如果取消点击一个术语，它也会保留在 url 中。理想情况下我需要做的是：

点击按钮：

• 如果不存在，请将查询添加到 url。
• 如果搜索条件已在 url 中，请将其删除。

<a class="category_buttons" id="cat_2" onclick="javascript:window.location.search += '&tax_category=2'">
    <img src="/wp-content/uploads/2017/09/bb-icons-trees2.png" />
    <span>Country Retreat</span>
</a>

Answer 1

var hash;
var item = {};
    

function searchParameter(key, value){

    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
        
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        if(hash[1]!==undefined)
            item[hash[0]] = hash[1];
    }

    var idx = (key in item);
    if (!idx || item[key]!=value) {
        item[key] =  value;
    } else {
        delete item[key];
    }
    var url = window.location.href.split("?")[0];
  	window.location.href = url+"?"+$.param(item);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<a href='javascript:void(0)' onclick="searchParameter('tax_category',2)" class='t'>Category 2</a>

<a href='javascript:void(0)' onclick="searchParameter('tax_category',3)" class='t'>Category 3</a>

<a href='javascript:void(0)'  onclick="searchParameter('tax_brand',3)" class='t'>Brand</a>


<a href='javascript:void(0)'  onclick="searchParameter('size','xl')" class='t'>Size</a>

以上代码将在按钮单击时生成 JSON 对象，如果对象中不存在项目，则会添加项目，否则从对象中删除项目，$.param 会将 JSON 对象转换为 URL 查询字符串，请签入控制台，从 window.location.search 中删除评论以获得功能