如何使用jQuery在按钮点击时修改a标签的href属性值

现有基础代码 #

HTML结构 #

<button class="button">button</button>
<a href="posts.php?post=55" class="post-link">Post</a>

初始jQuery代码 #

$('.button').on('click', function() {

  
});

实现目标 #

点击按钮后，a标签的href属性从posts.php?post=55更新为posts.php?post=44，最终a标签结构如下：

<a href="posts.php?post=44" class="post-link">Post</a>

完整实现代码 #

在按钮点击回调中获取目标a标签的href属性，做字符串替换后重新赋值即可：

$('.button').on('click', function() {
  $('.post-link').attr('href', function(index, originHref) {
    return originHref.replace('post=55', 'post=44');
  });
});

通用适配写法 #

如果初始href里的post参数值不是固定的55，而是动态变化的数字，可以用正则匹配替换，不需要硬编码匹配固定值：

$('.button').on('click', function() {
  $('.post-link').attr('href', function(index, originHref) {
    // 匹配post=后接任意数字的格式，统一替换为post=44
    return originHref.replace(/post=\d+/, 'post=44');
  });
});

注意：运行代码前请确认页面已经提前引入jQuery库，否则交互逻辑不会生效。

内容的提问来源于stack exchange，提问作者Pleinair