两种类型的参数:尺寸和价格。目前,我可以点击在尺寸栏和价格栏中只选择/突出显示一个,而不会影响另一个。
当我单击一个大小时,会添加一个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>
希望这能有所帮助。