如何在一個URL中有兩種類型的參數，其中一個以「＃」開頭，​​另一個以「＆」開頭並且不替換另一個？

Question

2種參數：尺寸和價格。目前，我可以單擊以選中/僅突出顯示大小欄中的一個，也可以只選擇一個顯示價格欄而不影響另一個。

當我點擊一個尺寸時，會添加一個URL參數「＃size = 4」。 點擊另一個尺寸將取代當前的URL參數"#size=5"或"#size=6".

當我點擊價格，參數"#pmin=30&pmax=40"加入。 點擊另一個價格將取代當前的參數與"#pmin=40&pmax=50"或

"#pmin=50&pmax=60". 

問題是，它也取代了尺寸參數。

問：

我怎麼能有這兩種類型的參數在同一個網址組合在一起，其中一個以「＃」開頭，​​以「&」而無需更換其它另一個開始？

目標URL參數：

example.com/#size=5&pmin=40&pmax=50 
or 
example.com/#pmin=40&pmax=50&size=5 

我有碼本=>http://jsfiddle.net/philcyb/af70tw19/2/然而，URL和參數沒有顯示。它必須在本地或以任何方式重新創建，以便顯示參數。

HTML：

<div class="divContainer"> 
    <div>Sizes</div> 
    <a class="sizes" href="#size=4" border="0"> 
     <div class="inDivSize">4</div> 
    </a> 
    <a class="sizes" href="#size=5" border="0"> 
     <div class="inDivSize">5</div> 
    </a> 
    <a class="sizes" href="#size=6" border="0"> 
     <div class="inDivSize">6</div> 
    </a> 
</div> 
<div class="divContainer"> 
    <div>Prices</div> 
    <a class="prices" href="#pmin=30&pmax=40" border="0"> 
     <div class="inDivPrice"> $30 - $40 </div> 
    </a> 
    <a class="prices" href="#pmin=40&pmax=50" border="0"> 
     <div class="inDivPrice"> $40 - $50 </div> 
    </a> 
    <a class="prices" href="#pmin=50&pmax=60" border="0"> 
     <div class="inDivPrice"> $50 - $60 </div> 
    </a> 
</div> 

CSS：

<style type="text/css"> 
.divContainer { 
    float: left; 
    width: 200px; 
    height: 80px; 
    border: 1px solid #000; 
    text-align: center; 
} 
.inDivSize:hover, .inDivPrice:hover { 
    background-color: yellow; 
} 
.inDivSizeClicked, .inDivPriceClicked { 
    background-color: yellow; 
} 
</style> 

JS/JQuery的：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".inDivSize").click(function() { 
      $(".inDivSize").removeClass("inDivSizeClicked"); 
      $(this).addClass("inDivSizeClicked"); 
     }); 
     $(".inDivPrice").click(function() { 
      $(".inDivPrice").removeClass("inDivPriceClicked"); 
      $(this).addClass("inDivPriceClicked"); 
     }); 
    }); 
</script> 

提前感謝您

Answer 1

您可以嘗試掛鉤的Click事件大小元素

$(".sizes").click(function(e) { 
     var psize = $(this).attr('psize'); 
     $('.prices').each(function() { 
      var priceParam = $(this).attr('href'); 
      $(this).attr('href', priceParam.indexOf('size=') === -1 ? (priceParam + '&size=' + psize) : priceParam.replace(/size=\d/, 'size='+ psize)); 
     }); 
    }); 

$('.prices').click(function() { 
     var priceParam = $(this).attr('href'); 
     console.log(priceParam); 
      $('.sizes').each(function() { 
       var psize = $(this).attr('psize'); 
       $(this).attr('href', priceParam.indexOf('size=') === -1 ? (priceParam + '&size=' + psize) : priceParam.replace(/size=\d/, 'size=' + psize)); 
      }); 
    }); 

在文件準備 添加此代碼，我還修改了divContainer我加了psize屬性這樣我仍然可以決定什麼大小是一個元素對應。

<div class="divContainer"> 
    <div>Sizes</div> 
    <a class="sizes" href="#size=4" psize="4" border="0"> 
     <div class="inDivSize">4</div> 
    </a> 
    <a class="sizes" href="#size=5" psize="5" border="0"> 
     <div class="inDivSize">5</div> 
    </a> 
    <a class="sizes" href="#size=6" psize="6" border="0"> 
     <div class="inDivSize">6</div> 
    </a> 
</div>  

希望得到這個幫助。