Question

我在搜索结果页面上设置了一个过滤器，以便用户根据他们要查找的酒店类型缩小搜索结果范围。唯一的问题是它只是添加到搜索字符串，因此他们点击的酒店类型越多，查询得到的时间越长，如果取消点击一个术语，它仍然保留在网址中。理想情况下我需要做的是：

点击按钮：

如果网址尚未存在，请向网址添加查询。
如果搜索条件已在网址中，请将其删除。

<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中删除注释以获取功能

使用按钮单击添加和删除搜索查询

1 个答案: