获取文本并插入css样式

Question

下午好。请有人可以帮助我用jQuery来做到这一点。 我想转换此：

<li class="li-class"> 
    <input class="class-radio" name="radio_1" value="red_0" id="id-radio" tabindex="1" type="radio"> 
    <label for="id-radio"></label> 
<label for="id-radio"><span class="span-color">red</span></label> 
</li> 
<li class="li-class"> 
    <input class="class-radio" name="radio_1" value="blue_0" id="id-radio" tabindex="2" type="radio"> 
    <label for="id-radio"></label> 
<label for="id-radio"><span class="span-color">blue</span></label> 
</li> 

在此：

<li class="li-class"> 
    <input class="class-radio" name="radio_1" value="red_0" id="id-radio" tabindex="1" type="radio"> 
    <label for="id-radio"></label> 
<label for="id-radio"><span class="span-color" style="color:red">red</span></label> 
</li> 
<li class="li-class"> 
    <input class="class-radio" name="radio_1" value="blue_0" id="id-radio" tabindex="2" type="radio"> 
    <label for="id-radio"></label> 
<label for="id-radio"><span class="span-color" style="color:blue">blue</span></label> 
</li> 

如果你看看，我想做出去的标签添加为风格的颜色值的文本...

这里是一个图片来解释更好

Click to open Image

谢谢大家对你的帮助

Answer 1

如果您打算更改当您单击的风格，这里是我的代码段（该ID必须是唯一的，所以我重新排列它们）：

$(function() { 
 
    $(':radio[name="radio_1"]').on('change', function(e) { 
 
    $(this).closest('.li-class').find('.span-color').attr('style', function(index, attr) { 
 
     return 'color:' + this.textContent; 
 
    }); 
 
    
 
    $(this).closest('.li-class').siblings().find('.span-color').removeAttr('style'); 
 
    }) 
 
});

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 

 
<li class="li-class"> 
 
    <input class="class-radio" name="radio_1" value="red_0" id="id-radio1" tabindex="1" type="radio"> 
 
    <label for="id-radio1"></label> 
 
    <label for="id-radio1"><span class="span-color">red</span></label></span> 
 
</li> 
 
<li class="li-class"> 
 
    <input class="class-radio" name="radio_1" value="blue_0" id="id-radio2" tabindex="2" type="radio"> 
 
    <label for="id-radio2"></label> 
 
    <label for="id-radio2"><span class="span-color">blue</span></label></span> 
 
</li>

Answer 2

按照我附加的代码片段。

window.onload = function() { 
 

 
var spans = document.getElementsByTagName("span"); 
 
var colors = [].slice.call(spans).map(e=> e.innerHTML); 
 
    
 
    for(var i=0; i<spans.length; i++) { 
 
    spans[i].style.color = colors[i]; 
 
} 
 

 
}

<li class="li-class"> 
 
    <input class="class-radio" name="radio_1" value="red_0" id="id-radio" tabindex="1" type="radio"> 
 
    <label for="id-radio"></label> 
 
<label for="id-radio"><span class="span-color">red</span></label> 
 
</li> 
 
<li class="li-class"> 
 
    <input class="class-radio" name="radio_1" value="blue_0" id="id-radio" tabindex="2" type="radio"> 
 
    <label for="id-radio"></label> 
 
<label for="id-radio"><span class="span-color">blue</span></label> 
 
</li> 
 
    <li class="li-class"> 
 
    <input class="class-radio" name="radio_1" value="green_0" id="id-radio" tabindex="2" type="radio"> 
 
    <label for="id-radio"></label> 
 
<label for="id-radio"><span class="span-color">green</span></label> 
 
</li> 
 
    <li class="li-class"> 
 
    <input class="class-radio" name="radio_1" value="brown_0" id="id-radio" tabindex="2" type="radio"> 
 
    <label for="id-radio"></label> 
 
<label for="id-radio"><span class="span-color">brown</span></label> 
 
</li>