データ属性値に基づいてBGカラーを適用する際の問題

Question

このデモを見て、データ属性に基づいて各要素に背景色を適用できない理由を教えてください。

$(".btn-color").each(function(){ 
 
     $(this).css("background-color", $(this).data('bg')); 
 
}); 
 

 

 
$(".btn-color").css("background-color", $(this).data('bg'));

.btn-color{ 
 
    height:40px; 
 
    width:40px; 
 
    border-radius:50%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <div class="row"> 
 
       <div class="col-sm-1"><button class="btn btn-color" data-bg="D8BFD8"></button></div> 
 
       <div class="col-sm-1"><button class="btn btn-color" data-bg="FF6347"></button></div> 
 
       <div class="col-sm-1"><button class="btn btn-color" data-bg="40E0D0"></button></div> 
 
       <div class="col-sm-1"><button class="btn btn-color" data-bg="EE82EE"></button></div> 
 
       <div class="col-sm-1"><button class="btn btn-color" data-bg="F5DEB3"></button></div> 
 
       <div class="col-sm-1"><button class="btn btn-color" data-bg="FFFFFF"></button></div> 
 
       <div class="col-sm-1"><button class="btn btn-color" data-bg="F5F5F5"></button></div> 
 
       <div class="col-sm-1"><button class="btn btn-color" data-bg="FFFF00"></button></div> 
 
       <div class="col-sm-1"><button class="btn btn-color" data-bg="9ACD32"></button></div> 
 
      </div>

Answer 1

あなたは、あなただけのランダムな文字列を持っている、六角色を持っていません。色が機能するには、ハッシュ記号#を入れる必要があります。

$(".btn-color").each(function(){ 
     $(this).css("background-color", "#" + $(this).data('bg')); 
}); 

https://jsfiddle.net/yak613/gm4y6z3r/