如何使用 JavaScript 为不同的锚元素做回脚注

Question

我有三个具有唯一ID的不同锚链接，我想为同一页面上的其他一些链接添加脚注。但是我遇到了问题 回到脚注 对于所有三个锚链接都是相同的。

<sup><a href="#one">One&nbsp;&Dagger;</a></sup><br/>
<sup><a href="#two">Two&nbsp;&Dagger;</a></sup><br/>
<sup><a href="#three">Three&nbsp;&Dagger;</a></sup>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/><br/><br/><br/><br/><br/>
  <a href="#" id="one">&#x21B5;Back to footnote</a>

我如何分别回到脚注引用上述锚点，例如"一"、"二"、"三"。

任何帮助将不胜感激...谢谢！！！

Answer 1

如果我正确理解了您的问题，您希望链接转到"返回脚注"链接，然后您希望"返回脚注"链接返回到您单击的链接。如果我对您的问题的解释有误，请发表评论，我会进行调整。

基本上，我为每个链接添加了一个事件侦听器，当您单击它时，它将"返回脚注"href更改为正确的锚点：

var $anchors = document.getElementsByClassName('anchor');
var $footnote = document.getElementById('footnote');
for (var i = 0; i < $anchors.length; i++) {
  var $anchor = $anchors[i];
  
  $anchor.addEventListener('click', function () {
    $footnote.href = '#' + this.id;
  });
}

<sup><a id="one" class="anchor" href="#footnote">One&nbsp;&Dagger;</a></sup>
<br><br><br>
<sup><a id="two" class="anchor" href="#footnote">Two&nbsp;&Dagger;</a></sup>
<br><br><br>
<sup><a id="three" class="anchor" href="#footnote">Three&nbsp;&Dagger;</a></sup>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="#" id="footnote">&#x21B5;Back to footnote</a>

jQuery

$('.anchor').click(function() {
  $('#footnote').attr('href', '#' + this.id);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<sup><a id="one" class="anchor" href="#footnote">One&nbsp;&Dagger;</a></sup>
<br><br><br>
<sup><a id="two" class="anchor" href="#footnote">Two&nbsp;&Dagger;</a></sup>
<br><br><br>
<sup><a id="three" class="anchor" href="#footnote">Three&nbsp;&Dagger;</a></sup>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="#" id="footnote">&#x21B5;Back to footnote</a>