javascript - 如何使用JavaScript返回不同 anchor 元素的脚注？

Question

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

<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>

如何分别返回脚注引用上述 anchor ，例如“一”、“二”、“三”。

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

Answer 1

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

基本上，我在每个链接中添加了一个事件监听器，当您单击它时，会将“返回脚注”href 更改为正确的 anchor :

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>