基于数据属性值应用背景颜色时出现问题

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'));
 });

.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>