JavaScript를 사용하여 다른 앵커 요소에 대한 각주를 다시 만드는 방법은 무엇입니까?

고유 ID가있는 3 개의 다른 앵커 링크를 가지고 있습니다. 동일한 페이지의 다른 링크에 각주를 만들고 싶습니다. 으로 문제에 직면했습니다.은 세 개의 앵커 링크 모두 동일합니다.JavaScript를 사용하여 다른 앵커 요소에 대한 각주를 다시 만드는 방법은 무엇입니까?

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

"1", "2", "3"과 같이 위의 앵커에 대한 각주 참조로 되돌리려면 어떻게합니까?

도움이 감사 할 것입니다 ... 감사합니다 !!!

출처

2017-01-25 Maniram

질문을 올바르게 이해했다면 링크를 "각주로 돌아 가기"링크로 이동 한 다음 "각주로 돌아 가기"링크를 클릭하면 링크로 돌아갑니다. 귀하의 질문에 대한 해석이 잘못 되었다면 의견을 말하면 제가 조정할 것입니다.

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를

기본적으로, 나는 당신이 올바른 앵커 HREF "을 각주로 돌아 가기"를 변경 클릭하여 각 링크에 이벤트 리스너를 추가했습니다

$('.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>

출처

2017-01-25 13:33:29

도움을 주셔서 감사합니다. 또 하나의 단점은, 별도의 앵커로 각주로 돌아 가면 이미 클릭 된 앵커로 다시 참조 할 수있는 방법입니다. – Maniram

@Maniram 나는 당신이 의미하는 것을 얻지 못했지만, 내 코드가 여전히 작동해야한다고 생각합니다. 앵커 링크를 변경하려고하면 모든 것이 작동합니까? –

Working Fine ... 많은 감사합니다 !!! – Maniram

JavaScript를 사용하여 다른 앵커 요소에 대한 각주를 다시 만드는 방법은 무엇입니까?

답변

관련 문제