0

テーブル内のテキストを画像に置き換えたいと考えています。テキストのバリエーションは、強、中、弱の 3 つです。これは、コーヒー製品の強度を優先するためです。テキストに強いと書かれている場合は、「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>

どんな助けでも大歓迎です。

4

2 に答える 2

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

デモ: http://jsfiddle.net/jRELP/

于 2013-11-13T13:40:58.280 に答える
0

試す

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

デモ:フィドル

于 2013-11-13T13:30:43.400 に答える