获取文本并插入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>

如果你看，我想让标签之间的文本作为样式中的颜色值添加。。。

这是一张图片来解释更好的

单击打开图像

感谢大家对的帮助

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>