javascript - 如何在一个 URL 中包含两种类型的参数，一种以 "#"开头，另一种以 "&"开头，并且不替换另一种？

Question

2种参数:尺寸和价格。目前，我只能单击选择/突出显示尺寸列中的一个，也只能单击选择/突出显示价格列中的一个，而不会影响另一个列中的一个。

当我点击尺寸时，会添加一个 URL 参数“#size=4”。单击另一个尺寸会将当前 URL 参数替换为 "#size=5" 或 "#size=6"。

当我点击价格时，会添加一个参数“#pmin=30&pmax=40”。点击另一个价格会将当前参数替换为 "#pmin=40&pmax=50" 或

"#pmin=50&pmax=60". 

问题是它也替换了尺寸参数。

问题:

如何将这两种类型的参数组合在一个 URL 中，其中一个以“#”开头，另一个以“&”开头，并且不替换另一个？

目标 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

可以尝试hook size元素的点击事件

$(".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 属性，这样我仍然可以确定 a 元素对应的大小。

<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>     

希望这有帮助。