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');只会选择.reference紧随其后的元素this。在你的例子.footnote中。

在您的第二个示例中不是这种情况，因为.footnote它是其父元素中的最后一个元素。要使其正常工作，您必须执行以下操作：

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

于 2013-08-24T01:05:19.947 回答