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必须是唯一的，所以我重新排列了它们）：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

按照我附上的摘录。

＆＃13;

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

＆＃13;

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

＆＃13;

获取文本并插入css样式

2 个答案: