Question

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

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

这是我的帖子标记：

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

为了让Javascript能够识别我的帖子格式，我会在帖子中添加一个标签，如：或等......

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

然后javascript会在我的帖子标记中添加一个类，所以我可以根据CSS类技巧设置图标。例如，如果我的帖子格式是音频（），则Javascript将添加audio-format＆＃34; CSS类＆＃34;到我的帖子标记。

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

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

1 个答案: