jquery - 使用 JQuery 将文本替换为图像

Question

我正在寻找用图像替换表格中的文本。我将有三种文本变体：强、中、弱。这是优先考虑咖啡产品的强度。如果文字说强，那么我想用“strong.png”等替换。我已经走了这么远，但现在坚持了想法。以下不起作用。

到目前为止我的代码：

$().ready(function () {
    $('.data-table tr .data').each(function () {
        string = $(this).text('Strong');
        $(this).html('<img src="strong.png" alt="' + string + '" />');
    });
});

</script>

表格标记为：

 <table class="data-table" id="product-attribute-specs-table">
    <colgroup><col width="25%">
    <col>
    </colgroup><tbody>
        <tr class="even">
            <th class="label">Coffee Strength</th>
            <td class="data last">Strong</td>
        </tr>
            </tbody>
</table>

任何帮助，将不胜感激。

Answer 1

尝试

jQuery(function ($) {
    $('.data-table tr .data').each(function () {
        var string = $.trim($(this).text());
        $(this).html('<img src="' + string + '.png" alt="' + string + '" />');
    });
});

演示：小提琴

Answer 2

$('.data-table tr .data').html(function() {
    var currentText = $(this).text().toLowerCase();
    return '<img src="' + currentText + '.png" alt="' + currentText + '" />';
});

演示：http: //jsfiddle.net/jRELP/