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成为新链接，您可以使用{{1}进行检查在这种情况下，一个建议是在事件上使用console.log(this)，这不会使链接工作，您的代码将首先运行。并且只是为了确保您在事件监听器中添加预防措施，如下所示：

event.preventDefault();

单击时更新跳转链接href

2 个答案: