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

Question

所以，我现在使用blogger.com作为我的博客平台。我们知道，博主是一个非常简单的平台，不支持任何高级编程语言。只能用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 class”添加到我的帖子标记中。

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