javascript - 如何根据数据属性值应用背景颜色

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>