使用 JQuery 将单选按钮标签替换为彩色 div

Question

我使用单选按钮具有以下形式：

<div class="attributes">
    <div class="attribute attribute-1 odd">
        <div class="form-item">
            <label>Color: <span class="form-required" title="This field is required.">*</span></label>
                <div class="form-radios"><div class="form-item" id="edit-attributes-1-7-wrapper">
                    <label class="option" for="edit-attributes-1-7">
                        <input type="radio" id="edit-attributes-1-7" name="attributes[1]" value="7"   class="form-radio" /> Black | 0x000000</label>
                </div>
                <div class="form-item" id="edit-attributes-1-6-wrapper">
                     <label class="option" for="edit-attributes-1-6">
                        <input type="radio" id="edit-attributes-1-6" name="attributes[1]" value="6"   class="form-radio" /> Blue | 0x5E79A4</label>
                </div>

                <div class="form-item" id="edit-attributes-1-5-wrapper">
                 <label class="option" for="edit-attributes-1-5">
                    <input type="radio" id="edit-attributes-1-5" name="attributes[1]" value="5"   class="form-radio" /> Red | 0xC33438</label>
                </div>
        </div>
    </div>

我试图将“Color | 0xxxxxxx”部分替换为具有相关颜色的正方形。基本上，我需要读取“Color | 0xxxxxxx”，解析它以提取颜色的十六进制值，并将整个文本替换为像

有人对此有任何见解吗？

Answer 1

首先，不要嵌套标签，而是将其放在输入旁边：

<input type="radio" id="edit-attributes-1-5" 
 name="attributes[1]" value="5" class="form-radio" /><label 
 class="option" for="edit-attributes-1-5">Red | 0xC33438</label>

然后使用 jquery:

$("label[for^='edit-attributes']").each( 
// select labels whose "for" begin with "edit-attributes"
    function() {
       var text = $(this).html();
       // css color begin with #, not 0x
       color = '#' + text.substr(text.indexOf("| 0x")+4); 
       $(this).html('<div class="optionsquare" style="background-color:' + 
                      color + '">');
});

css:

.optionsquare {
    display:inline-block;
    height:20px;
    width:20px;
}

Answer 2

我终于找到了一种方法来永久删除文本并用跨度替换它，无需更改标记。

$(document).ready(function() {
    $(".form-radio").each(function() {
        var label = $(this).parent();
        label.wrapInner('<span class="will-be-deleted" />').find("input").appendTo(label);
        var text = label.find("span").text();
        var color = /0x[a-f0-9]{6}/i.exec(text)[0];
        var icon = $("<span />").css({
            "margin-left": 4,
            "padding-left": 16,
            "background-color": color.replace(/^0x/, "#")
        })
        label.find("span").remove();
        label.append(icon);
    });
});

jsFiddle 演示。

Answer 3

以此：

$("label.option").each(function(){
  var lithex = $(this).text().split("|");
  var hex = $.trim(lithex[1]);
  $(this).text("").append('<div style="height :20px;width:20px;background-color:'+hex+'"></div>');
});

希望这有帮助。干杯

Answer 4

$(document).ready(function()
        {
            $('input[type="radio"].form-radio').each(
            function()
            {
                var aa = $(this).next().text().split('|');
                var NewDiv = $('<div></div>');
                NewDiv.css({ backgroundColor: aa[1].substring(3, aa[1].length), height: '20px',width: '20px' });
                $(this).parents('.form-item:first').append(NewDiv);
            });
        });