單擊按鈕添加和刪除搜索查詢

Question

我已經在搜索結果頁面上設置了一個過濾器，以使用戶能夠根據他們所尋找的酒店類型來縮小搜索范圍。 唯一的問題是，它只是添加到搜索字符串中，因此他們單擊的酒店類型越多，查詢的時間就越長，並且如果取消單擊它保留在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刪除注釋以獲取功能