javascript - 如何将元素的背景颜色设置为该元素的类名的值？

Question

我想让 span 的类成为使用 jQuery 的相同 span 的背景色。有什么办法吗？

$(function() {
$("span").css("background-color")
});

span {
  display: inline-block;
  width: 5px;
  height: 5px;
  border: solid #0a0a0a 1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="red"></span>
<span class="red"></span>
<span class="red"></span>
<span class="blue"></span>
<span class="silver"></span>
<span class="black"></span>
<span class="black"></span>
<span class="silver"></span>
<span class="grey"></span>
<span class="silver"></span>
<span class="green"></span>
<span class="lightgreen"></span>
<span class="gold"></span>
<span class="yellow"></span>
<span class="yellow"></span>
<span class="yellow"></span>
<span class="yellow"></span>
<span class="yellow"></span>
<span class="yellow"></span>
<span class="gold"></span>
<span class="gold"></span>
<span class="gold"></span>
<span class="red"></span>
<span class="red"></span>
<span class="red"></span>
<span class="red"></span>
<span class="green"></span>
<span class="green"></span>
<span class="green"></span>
<span class="green"></span>
<span class="lightgreen"></span>
<span class="lightgreen"></span>
<span class="green"></span>
<span class="green"></span>
<span class="gold"></span>
<span class="gold"></span>
<span class="orange"></span>

Answer 1

你可以传递一个函数作为第二个参数，它可以返回类的名称

$(function() {
  $("span").css("background-color", function() {
    return this.className;
  })
});

span {
  display: inline-block;
  width: 5px;
  height: 5px;
  border: solid #0a0a0a 1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="red"></span><span class="red"></span><span class="red"></span><span class="blue"></span><span class="silver"></span><span class="black"></span><span class="black"></span><span class="silver"></span><span class="grey"></span><span class="silver"></span>
<span
class="green"></span><span class="lightgreen"></span><span class="gold"></span><span class="yellow"></span><span class="yellow"></span><span class="yellow"></span><span class="yellow"></span><span class="yellow"></span><span class="yellow"></span><span class="gold"></span>
  <span
  class="gold"></span><span class="gold"></span><span class="red"></span><span class="red"></span><span class="red"></span><span class="red"></span><span class="green"></span><span class="green"></span><span class="green"></span><span class="green"></span><span class="lightgreen"></span>
    <span
    class="lightgreen"></span><span class="green"></span><span class="green"></span><span class="gold"></span><span class="gold"></span><span class="orange"></span>