更换单选按钮使用JQuery

我一直在使用单选按钮下面的表格用彩色标签的div：更换单选按钮使用JQuery

<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”与相关颜色的正方形。基本上，我需要阅读“颜色| 0xxxxxxx”，解析它以提取颜色的十六进制值，并用一个格替换整个文本，如<div style="height :20px;width:20px;background-color:0xxxxxx"></div> 任何人都有这方面的见解？

来源

2011-05-05 Cyril

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

$(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 here。

来源

2011-05-05 06:10:46

非常感谢这一点，我已经坚持了几天这一点。我无法更改标记，它是一个drupal网站。干杯 – Cyril 2011-05-05 08:56:55

首先，代替嵌套的标签，一边将其与输入：

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

来源

2011-05-05 05:57:11 ariel

尝试了这一点：http://jsfiddle.net/fuEZW/ – 2011-11-20 18:13:08

有了这个：

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

希望这会有所帮助。干杯

来源

2011-05-05 06:02:13

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

来源

2011-05-05 06:09:33

更换单选按钮使用JQuery

回答

相关问题