jQuery: multiple references to one footnote, link back to the referring ID

been struggling to solve this as I'm completely newbie to JS. What I'm trying to achieve:

  • To have multiple references to a footnote (can't avoid this).
  • Be able to reference back to the correct ID

My code looks like this.

FIDDLE HTML

<section>
    <p>Lorem<a id="fn1-ref" href="#fn1" title="link to footnote" class="art-fn-ref"><sup>1</sup></a>.</p>
    <p>ipsum<a id="fn2-ref" href="#fn2" title="link to footnote" class="art-fn-ref"><sup>2</sup></a></p>
    <p>dolor<a id="mulfn1-1-ref" href="#fn3" title="link to footnote" class="art-fn-ref"><sup>3</sup></a>.</p>
    <p>sit<a id="mulfn1-2-ref" href="#fn3" title="link to footnote" class="art-fn-ref"><sup>3</sup></a>.</p>
</section>
<aside>
    <ul>
        <li><a id="fn1" href="#fn1-ref" title="link to main text" class="art-fn"><sup>1</sup></a> Footnote 1</li>
        <li><a id="fn2" href="#fn2-ref" title="link to main text" class="art-fn"><sup>2</sup></a> Foonote 2</li>
        <li><a id="fn3" href="#mulfn1-1-ref" title="link to main text" class="art-fn"><sup>3</sup></a> Foonote 3</li>
    </ul>
</aside>

JS

//convention
//ID of reference to footnote= Caller ID
//ID of the footnote= FN ID
//HREF of the footnote that refer back to the caller ID = FN HREF

$(document).ready(function () {
    $(".art-fn-ref").one('click', function (e) {
        //001 - check if the Caller ID match a pattern (mulfn#)
        $('[id^=mulfn]').filter(function () {
            //002 - copy the 001 ID
            //003 - store the original HREF and ID of the footnote (FN HREF and FN ID)
            //004 - replace the FN HREF with HREF that points out to the correct caller ID
            //005 - once the "modified" FN HREF is clicked, restore it back to the original FN HREF
        });
    });
});

For example. There are two references to footnote 3 with the following ID "mulfn1-1-ref" & "mulfn1-2-ref". Suppose that I click the "mulfn1-2-ref" and it took me to "fn3" If I click the fn3, i need it to take me back to "mulfn1-2-ref" instead of "mulfn1-1-ref".

How to do this? Please help.

Answers 1

  • When you click on one of the top links

    • add a data-href attribute on the footnote link it linked to with the ID of the referring link
    • add a click event listener to the footnote link that disables the default action and sets the window.location to the data-href value, then removes the event listener

    $(document).ready(function () {
        $(".art-fn-ref").on('click', function (e) {
            var id = $(this).attr('id'),
            		$target = $($(this).attr('href'));
            $target.attr('data-href','#'+id);
            $target.on('click',function(e) {
            	e.preventDefault();
            	window.location = $(this).attr('data-href');
              $(this).off('click');
            })
        });
    });
    html,
    body,
    div,
    span,
    applet,
    object,
    iframe,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    blockquote,
    pre,
    abbr,
    acronym,
    address,
    big,
    cite,
    code,
    del,
    dfn,
    em,
    img,
    ins,
    kbd,
    q,
    s,
    samp,
    small,
    strike,
    strong,
    sub,
    sup,
    tt,
    var,
    b,
    u,
    i,
    center,
    dl,
    dt,
    dd,
    ol,
    ul,
    li,
    fieldset,
    form,
    label,
    legend,
    table,
    caption,
    tbody,
    tfoot,
    thead,
    tr,
    th,
    td,
    article,
    aside,
    canvas,
    details,
    embed,
    figure,
    figcaption,
    footer,
    header,
    hgroup,
    menu,
    nav,
    output,
    ruby,
    section,
    summary,
    time,
    mark,
    audio,
    video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }
    
    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    menu,
    nav,
    section {
        display: block;
    }
    
    body {
        line-height: 1;
    }
    
    ol,
    ul {
        list-style: none;
    }
    
    blockquote,
    q {
        quotes: none;
    }
    
    blockquote:before,
    blockquote:after,
    q:before,
    q:after {
        content: "";
        content: none;
    }
    
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    .art-fn-ref {
        display: inline-block;
        text-decoration: none;
        background-color:#CCC;
        border: 1px solid #555;
        padding: 1px;
        vertical-align: super;
        font-size: 75%
    }
    a {
    }
    
    .art-fn {
        display: inline-block;
        text-decoration: none;
        background-color:#4CAF50;
        border: 1px solid #555;
        padding: 1px;
        font-size: 75%
    }
    
    p {
        padding: 6px 0 3px 0;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <section>
            <p>Lorem<a id="fn1-ref" href="#fn1" title="link to footnote" class="art-fn-ref"><sup>1</sup></a>.</p>
            <p>ipsum<a id="fn2-ref" href="#fn2" title="link to footnote" class="art-fn-ref"><sup>2</sup></a></p>
            <p>dolor<a id="mulfn1-1-ref" href="#fn3" title="link to footnote" class="art-fn-ref"><sup>3</sup></a>.</p>
            <p>sit<a id="mulfn1-2-ref" href="#fn3" title="link to footnote" class="art-fn-ref"><sup>3</sup></a>.</p>
        </section>
        <aside>
            <ul>
                <li><a id="fn1" href="#fn1-ref" title="link to main text" class="art-fn"><sup>1</sup></a> Footnote 1</li>
                <li><a id="fn2" href="#fn2-ref" title="link to main text" class="art-fn"><sup>2</sup></a> Foonote 2</li>
                <li><a id="fn3" href="#mulfn1-1-ref" title="link to main text" class="art-fn"><sup>3</sup></a> Foonote 3</li>
            </ul>
        </aside>


Related Articles