點擊時更新跳轉鏈接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)