如何將元素的背景顏色設置爲該元素類名的值？

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>