javascript - 如何通过 jQuery 添加/更新 href 属性的参数？

Question

我有一个带有 anchor 元素的页面:

<a id="courses" href="/courses">Courses</a>

我想向 href 添加或更新一些参数，例如:

• 添加country参数:<a id="courses" href="/courses?country=US">Courses</a>

• 更新country参数来自US至UK :<a id="courses" href="/courses?country=UK">Courses</a>

通过 JavaScript 或 jQuery 实现此目的的最佳方法是什么？

Answer 1

您可以将函数作为第二个参数传递给 .attr()修改 href 属性。

尝试以下方法:

// set
$("#courses").attr('href','/courses?country=US'); 
console.log($("#courses").attr('href'));

// update
$('#setParam').click(function(){
  $("#courses").attr('href', function(_, el){
    return el.replace(/(country=)[a-z]+/ig, '$1UK');
  });
  console.log($("#courses").attr('href'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="courses" href="/courses">Courses</a>
<button id="setParam" type="button">Set Param</button>