如何在一个URL中有两种类型的参数，其中一个以“＃”开头，​​另一个以“＆amp;”开头并且没有替换另一个？

Question

2种参数：尺寸和价格。目前，我可以点击选择/突出显示尺寸列中的一个，也只有一个用于价格列，而不会影响另一个。

当我点击一个尺寸，一个URL参数＆＃34;＃size = 4＆＃34;被添加。 点击其他尺寸会将当前网址参数替换为"#size=5"或"#size=6".

点击价格后，会添加参数"#pmin=30&pmax=40"。 点击其他价格会将当前参数替换为"#pmin=40&pmax=50"或

"#pmin=50&pmax=60". 

问题是它还会替换size参数。

问题：

如何将这两种类型的参数组合在一个URL中，其中一个以＆＃34;＃＆＃34;另一个以＆＃34;＆amp;＆＃34;开头并且没有替换另一个？

目标网址参数：

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

我有以下代码=＆gt; 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>

提前致谢SO

Answer 1

您可以尝试挂钩size元素的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>     

希望这有帮助。