ボタンで検索クエリを追加および削除する

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]; 
 
    \t 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からコメントを削除してください。