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

Question

我想让span的类成为使用jQuery的同一跨度的背景颜色。有没有办法做到这一点？

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

您可以将一个函数作为第二PARAM可以返回类

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