Замените метку переключателей на цветные div с помощью JQuery - PullRequest
Новая
       58

Замените метку переключателей на цветные div с помощью JQuery

0 голосов
/ 05 мая 2011

У меня есть следующая форма с использованием переключателя: 

<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>

Я пытаюсь заменить часть "Цвет | 0xxxxxxx" на квадрат с соответствующим цветом.По сути, мне нужно прочитать «Color | 0xxxxxxx», разобрать его, чтобы извлечь шестнадцатеричное значение цвета и заменить весь текст на div вроде <div style="height :20px;width:20px;background-color:0xxxxxx"></div> У кого-нибудь есть понимание этого?

Ответы [ 4 ]

3 голосов
/ 05 мая 2011

Во-первых, вместо того, чтобы вкладывать метку, поместите ее сбоку с помощью ввода: 

<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;
}
0 голосов
/ 05 мая 2011

Я наконец нашел способ удалить текст навсегда и заменить его на интервал, не нужно менять разметку. 

$(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 demo здесь .

0 голосов
/ 05 мая 2011 
$(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);
            });
        });
0 голосов
/ 05 мая 2011

При этом: 

$("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>');
});

Надеюсь, это поможет. Приветствия

...