点击时如何动态更新链接中的数据

Question

我说了3组不同的过滤器，如下所示：

<div class="filter1">
<ul>
   <li><a href="javascrript:void(0)" data-param1="1">Some link1</a></li>
   <li><a href="javascrript:void(0)" data-param2="2">Some link2</a></li>
   <li><a href="javascrript:void(0)" data-param3="3">Some link3</a></li>
</ul>
</div>

我需要通过window.location.href onclick动态附加/更新链接的参数

像这样：

$('.filter1 li a').on('click',function(){window.location.href += $(this).data('data-param1');})

因此，链接将为domain.com/site/filter?param1=1

然后点击另一个过滤器链接后，它将更新为domain.com/site/filter?param1=1&?param2=2

但是，如果将单击已单击的链接，则不应追加而是更新参数

如何通过js / jQuery进行管理？ 也许还有其他方法可以执行该任务？

希望有道理！

提前谢谢了！

更新：到badAdviceGuy：不需要location.hash，链接必须将页面导航到具有一些新参数的新地址。 但是问题是要添加，如果链接中已包含参数，则要更新当前参数。

Answer 1

如果我正确理解您的问题，这可能会有所帮助。

在不离开当前页面的情况下修改window.location ，我很喜欢使用window.location.hash 。 我也将获取所有的html数据属性相同。

HTML：

<div class="filter1">
  <ul>
    <li><a href="javascrript:void(0)" data-param="filter1">Some link1</a></li>
    <li><a href="javascrript:void(0)" data-param="filter2">Some link2</a></li>
    <li><a href="javascrript:void(0)" data-param="filter3">Some link3</a></li>
  </ul>
</div>

JS：

$('.filter1 li a').on('click',function(){window.location.hash = $(this).data('data-param');})

Answer 2

$('.filter1 ul li a').on('click',function(e)
{
window.location.href = "domain.com/site/filter?param" + $(this).data('param') + "=" + $(this).data('param');
});

HTML：

<div class="filter1">
<ul>
   <li><a href="javascrript:void(0)" data-param="1">Some link1</a></li>
   <li><a href="javascrript:void(0)" data-param="2">Some link2</a></li>
   <li><a href="javascrript:void(0)" data-param="3">Some link3</a></li>
</ul>
</div>