Question

可以用图像更改标签文本吗？例如，＃annestrella有文本“UnaEstrella”，我想要明文（或简单地添加带填充或类似的图像）并显示来自http://www.domain.com/images/unaestrella.png的图像。这可能吗？

<ul class="radio_list">
    <li>
        <label for="unaestrella">
            <input id="unaestrella" type="radio" value="unaestrella" name="topics"/>
            UnaEstrella
        </label>
    </li>
    <li>
        <label for="dosestrellas">
            <input id="dosestrellas" type="radio" value="dosestrellas" name="topics"/>
            DosEstrellas
        </label>
    </li>
</ul>

Answer 1

是的，可以使用class来label，因为#unaestrella是您已用于id的{{1}}和input必须是唯一的，一个ID必须只分配给一个元素。

<强> CSS：

ID

<强> HTML;

.unaestrella{
    background : url('https://m.dominos.co.uk/m/iphone/assets/img/common/icon-single-small.png') no-repeat right;
    padding: 0 25px 0 0;
    cursor:pointer;
}

EXAMPLE.

Answer 2

将<img/>元素添加到<label/>中，如下所示：

在html中（http://jsfiddle.net/kyjey/）

<ul class="radio_list">

    <li>
        <input id="unaestrella" type="radio" value="unaestrella" name="topics"/>
        <label for="unaestrella">
            <img src="http://www.buscatuspa.com/wp-content/themes/Avada/images/unaestrella.png"/>
        </label>
    </li>

</ul>

使用jQuery编辑以符合作者要求（http://jsfiddle.net/kyjey/2/）

$(function() {
    $('#unaestrella').next('label').empty().append('<img src="http://www.buscatuspa.com/wp-content/themes/Avada/images/unaestrella.png"/>');
})

Answer 3

我可以用css解决这个问题：

ul.radio_list li label[for=unaestrella] {position:relative !important;float:left !important;line-height:25px !important;background-image:url(images/unaestrella.png);background-position:top left;background-repeat:no-repeat !important; width:100% !important;color:transparent !important;}

但是jQuery可以删除文本吗？

用图像更改标签文本

3 个答案: