Question

我很确定这是可能的，我认为我在正确的轨道上，但它仍然不适合我; 我有这个作为jquery，导入了最新的jquery文件 - 我想要的是每个颜色列表项，它们包含的内容将用作它们的背景颜色。如果有人可以帮助我，因为我已经尝试了几十个小时没有成功，谢谢。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$( "$li.selected-color" ).each(function(element) { var colorlinkcontent = $(element).html(); $(element).css("background-color", colorlinkcontent); });
</script>
<ul class="colors">
  <li class="selected-color">#f334568
    <li class="selected-color">#f334568
      <li class="selected-color">#f334568
        <li class="selected-color">#f334568
</ul>
<hr/>
<span class="title">Selected criteria:</span>

<ul class="selected-criteria">
  <li>yolo
    <li class="selected-color">#f334568
      <li>Website
</ul>

＆＃13;

Answer 1

一些问题：

没有li结束标记。
没有script开标。
十六进制颜色代码的位数太多。
脚本标记需要等到加载DOM或者在列表元素之后。
你需要阅读.each()如何工作，因为回调函数的第一个参数是索引而不是元素。
选择器应为li.selected-color而不是$li.selected-color。

<ul class="colors">
  <li class="selected-color">#f33456</li>
  <li class="selected-color">#f33456</li>
  <li class="selected-color">#f33456</li>
  <li class="selected-color">#f33456</li>
</ul>
<hr/>
<span class="title">Selected criteria:</span>

<ul class="selected-criteria">
  <li>yolo</li>
  <li class="selected-color">#f33456</li>
  <li>Website</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$( "li.selected-color" ).each( function() {
    var $el = $(this);
    $el.css( "background-color", $el.text() );
});
</script>

使用该元素的html内容更改li元素的背景

1 个答案: