单击更新跳转链接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，这似乎有违直觉。我想我的问题是，在JavaScript更新href之后(似乎是这样)，跳会发生吗？怎样才能让它先跳起来，然后更新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)