Question

我写了一篇文章，希望超链接脚注能够内联切换相应的引用。所以，例如：

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>

有什么想法吗？

谢谢！

Answer 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;
    });
});

Answer 2

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

描述：获取每个元素的紧随其后的兄弟匹配元素的集合。如果提供了选择器，则检索它只有当它与那个选择器匹配时才是下一个兄弟。

这意味着您的代码：$(this).next('.reference').toggle('slow');只会在.reference之后立即选择this元素。在您的示例中.footnote。

在第二个示例中并非如此，因为.footnote是其父级中的最后一个元素。为了使它工作，你必须做这样的事情：

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

切换下一个元素仅适用于div

2 个答案: