javascript - 检测文章标签内容以自动分配文章类

Question

所以，我现在使用 blogger.com 作为我的博客平台。众所周知，blogger 是一个非常简单的平台，不支持任何高级编程语言。只有使用 Javascript 才有可能做任何事情。

我的帖子是关于个人博客的，有一些像 Wordpress 使用的帖子格式，我有一个标准的帖子，音频帖子和视频帖子。我想根据我的帖子格式类型在我的帖子标题旁边显示帖子格式图标。视频帖子的标题旁边会有视频图标，音频帖子的标题旁边会有音频图标，等等...

这是我的帖子标记:

<div class="post">
    <h3>
        <a href="#">Post title</a>
    </h3>
    <!--content goes here-->
</div>

为了使 Javascript 可以识别我的帖子格式，我将在我的帖子中添加一个标签，如下所示:<span data-format="audio-format"></span>或 <span data-format="video-format"></span>等等……

<div class="post">
    <h3>
        <a href="#">Post title</a>
    </h3>
    <span data-format="video-format"></span>
    <!--content goes here-->
</div>

然后 javascript 会在我的帖子标记中添加一个类，因此我可以根据 CSS 类技巧设置图标。例如，如果我的帖子格式是音频 ( <span data-format="audio-format"></span> )，Javascript 将添加 audio-format “CSS 类”到我的帖子标记。

<div class="post audio-format">
    <h3>
        <a href="#">Post title</a>
    </h3>
    <span data-format="audio-format"></span>
    <!--content goes here-->
</div>

不幸的是，我的技能只是 HTML 和 CSS，我不精通 Javascript 或 jQuery。是否可以使用 Javascript 技巧？

PS:对不起我的英语。

Answer 1

如果我正确理解了问题:

$('div.post').has('span[data-format]').addClass(function() {
   var format = $('span[data-format]', this).data('format');
   return 'post-format-' + format.split('-')[0];
});

替代方案:

[].slice.call(document.querySelectorAll('.post')).forEach(function(post) {
     var span = post.querySelector('span[data-format]');
     if (!span) return;
     var format = span.getAttribute('data-format').split('-')[0];
     post.classList.add('post-format-' + format);
});

编辑:根据更改后的标记，您应该只删除拆分部分。

$('div.post').addClass(function() {
   return $('span[data-format]', this).data('format');
});