javascript - 使用 jQuery 加载基于 <label> 内容的图标

Question

我有一个网站，其中的内容是从数据库动态加载的。每个标签的内容各不相同。

一个可能生成为 General:，而另一个可能生成为 TV:。 我的问题是，jQuery 有什么方法可以(基于标签的 HTML 输出)用字体很棒的图标替换 NAME: 吗？

例如:

<label>TV:</label>

会变成:

<i class="fa fa-film fa-2x"></i>

Answer 1

尝试

var icons = {
    'tv:': 'film',
    'edit:': 'edit'
};

$('label').replaceWith(function () {
    var text = $(this).text().trim().toLowerCase(),
        icon = icons[text];
    return icon ? '<i class="fa fa-' + icon + ' fa-2x"></i>' : undefined;
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css">

<label>TV:</label>
<label>TsV:</label>
<label>EDIT:</label>