Question

是否有一种简单的方法可以将data-scroll的属性添加到kramdown脚注中。

[Battlezone](www.github.com) [^1]

我上面的脚注如下所示：

<sup id="fnref:1"><a href="#fn:1" class="footnote">1</a></sup>

是否可以将data-scroll属性添加到锚标记？

Answer 1

您可以在脚注定义中为各个脚注添加属性。

This is some text with a footnote.[^note]

[^note]:{: .class #id other-attribute="attribute"}
    This footnote has some attributes.

输出：

<p>This is some text with a footnote.<sup id="fnref:note"><a href="#fn:note" class="footnote">1</a></sup></p>

<div class="footnotes">
    <ol>
        <li id="fn:note">
            <p class="class" id="id" other-attribute="attribute">This footnote has some attributes. <a href="#fnref:note" class="reversefootnote">&#8617;</a></p>
        </li>
    </ol>
</div>

Answer 2

我不确定你真正想在data-scroll属性中写什么。但是这里有一个示例JS，它将这些属性添加到这些链接。将此代码放在结束</body>标记之前。

您想要的是获取每个脚注链接（仅返回内容的链接），然后为所有链接添加属性。这可以这样做：

仅限JS

var footnoteLinks = document.getElementsByClassName("reversefootnote");
var i, hrefAttribute;
for (i = 0; i < footnoteLinks.length; i++) {
    hrefAttribute = footnoteLinks[i].getAttribute("href");
    footnoteLinks[i].setAttribute("data-scroll", hrefAttribute);
}

的jQuery

如果你碰巧有jQuery可用，这更容易做到：

$('.reversefootnote').each(function(){
    var footNoteLink = $(this);
    footNoteLink.attr("data-scroll", footNoteLink.attr("href"));
});

如果您想将data-scroll值设置为某个值（例如全部为"true"），则代码变得更加简单：

// JS only
var footnoteLinks = document.getElementsByClassName("reversefootnote");
var i;
for (i = 0; i < footnoteLinks.length; i++) {
    footnoteLinks[i].setAttribute("data-scroll", "true");
}
// jQuery
$('.reversefootnote').each(function(){
    footNoteLink.attr("data-scroll", "true");
});

如果这不是你想要的，那么这肯定会给你一个提示。

将数据滚动属性添加到Kramdown脚注

2 个答案:

仅限JS

的jQuery