点击时更新跳转链接href

Question

我正在尝试在点击时更新跳转链接href。 我将初始跳转链接设置为如下所示：

<a href="#2" id="next">Next</a>

然后，我使用一些JavaScript来更新href onclick：

var jump = this.href.match(/\#\d+$/)[0];
var num = parseInt(jump.substr(1, jump.length), 10);
var newNum = num + 1;

document.getElementById('next').href = '#' + num;

由于某种原因，当我第一次单击跳转链接时，它将带我到＃3（而不是预期的＃2）。 如果将HTML中的href更改为＃1，它将带我进入＃2，这似乎与直觉相反。 我想我的问题是，在href由JavaScript更新后（似乎是）会发生跳转吗？ 以及如何让它先跳转然后更新href？

（此外，我正在使用addEventListener（）来触发点击）。

Answer 1

var jump = this.href.match(/\#\d+$/)[0];
var num = parseInt(jump.substr(1, jump.length), 10);
var newNum = num + 1;

setTimeout(function() {
    document.getElementById('next').href = '#' + newNum;
});

小型重构：

var num = parseInt(this.href.split('#').pop(), 10);
var a = this;

setTimeout(function() {
    a.href = '#' + (num + 1);
});

Answer 2

您所遇到的问题很可能是因为如您所猜想的那样，是在触发事件之前发生了跳转，并且这导致this是新链接，您可以使用console.log(this)进行检查，这种情况将使用event.preventDefault(); 在这种情况下，这将无法使链接正常工作，并且您的代码将首先运行。 并确保，您可以在事件侦听器中添加预防措施，如下所示：

something.addEventListener("click", function(event) {
  event.preventDefault();}, false)