Javascript 如何在一个URL中包含两种类型的参数，其中一种以“”开头，另一种以“&”开头，而不替换另一种？

2类参数：尺寸和价格。目前，我可以单击选择/突出显示“尺寸”列中的一个，也可以单击“价格”列中的一个，而不影响另一个

单击某个大小时，会添加URL参数size=4。 单击另一个大小将替换当前URL参数为size=5或size=6

单击价格时，会添加参数pmin=30&pmax=40。 单击另一个价格将用pmin=40&pmax=50或

问题是它还替换了size参数

问题:

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

目标URL参数：

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

我有这个=>中的代码，但是URL和参数没有显示。必须在本地或以任何方式重新创建，以便显示参数

HTML:

CSS:

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>

---

提前感谢，您可以尝试钩住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));
            });
    });

在documentready中添加此代码 我还修改了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>     

---

希望这有帮助。

你好，道坦。这是我需要的正确实现。然而，还有一件小事，也许你仍然可以解决。两种类型的参数组合在一起。但当我单击一个新的尺寸时，price参数被重置或再次消失。价格参数能否保持可见？即使我点击了一个新的尺寸？嗨，Philcyb。我修改了我的答案，希望这会有所帮助。我还制作了小提琴供你们检查。非常感谢你！它正按我的需要完美地工作。尤其是小提琴。我会考虑这个问题的。谢谢。很高兴能为您提供帮助再次感谢您的解决方案。我试图改变URL参数的位置，即在价格之前先使用大小。类似这样：大小=6&pmin=50&pmax=60

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

$(".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));
            });
    });

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