我怎么能在一个URL中有两种类型的参数，其中一种以“”开头#"而另一个以“0”开头&"并且不替

How can I have two types of parameters in one URL, where one starts with "#" and the other one starts with "&" and without replacing the other?

本文关键字：quot 开头 amp 一个以 另一个 URL 一个 怎么能 两种 类型 一种      更新时间：2023-09-26

两种类型的参数：尺寸和价格。目前，我可以点击在尺寸栏和价格栏中只选择/突出显示一个，而不会影响另一个。

当我单击一个大小时，会添加一个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>

提前感谢SO

您可以尝试挂钩大小元素的点击事件

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

希望这能有所帮助。

相关文章：