0

記事を書いており、ハイパーリンクの脚注で対応する参照をインラインで切り替えたいと考えています。したがって、例：

jQuery:

$(document).ready(function() {
    $('.reference').hide();
    $('.footnote').click(function() {
        $(this).next('.reference').toggle('slow');
        return false;
    });
});

html:

<p>
    Blah blah blah blah<a href='#' class='footnote'>[5]</a><span class='reference'>Doe, John. <em>The Book of Blah</em>. 2013.</span>
</p>

これは問題なく動作しますが、フォーマットが問題になる特定のケースでは、参照範囲を段落タグの外に置くと、操作全体が台無しになります。

<p>
    Blah blah blah blah<a href='#' class='footnote'>[5]</a>
</p>
<span class='reference'>Doe, John. <em>The Book of Blah</em>. 2013.</span>

何か案は？

ありがとう！

4

2 に答える 2

1

これを非常に柔軟にしたい場合は、脚注タグと参照タグ内に脚注番号を配置する必要があります。

<p>
    Blah blah blah blah<a href='#' data-footnote="5" class='footnote'>[5]</a>
</p>
<span class='reference' id='reference-5'>Doe, John. <em>The Book of Blah</em>. 2013.</span>

JavaScriptに関しては：

$(document).ready(function() {
    $('.reference').hide();
    $('.footnote').click(function() {
        $('#reference-' + this.getAttribute('data-footnote') ).toggle('slow');
        return false;
    });
});
于 2013-08-24T00:58:37.967 に答える
1

http://api.jquery.com/next/

説明:一致した要素のセット内の各要素の直後の兄弟を取得します。セレクターが指定されている場合、そのセレクターに一致する場合にのみ、次の兄弟を取得します。

これは、コード:が の直後の要素$(this).next('.reference').toggle('slow');のみを選択することを意味します。あなたの例では。.referencethis.footnote

.footnote親の最後の要素であるため、これは2番目の例には当てはまりません。それを機能させるには、次のようにする必要があります。

$(this).parent().next('.reference')

于 2013-08-24T01:05:19.947 に答える