CODEWITHSUNDEEP
javascriptjquery
Behseini
Behseini

Reputation: 6320

How to apply BG color based on data attribute value

I am working on the code below. Why am I not able to apply background color for each element based on its data attribute?

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

Upvotes: 2

Views: 361

Answers (1)

yaakov
yaakov

Reputation: 4655

You don't have the hex color, you just have a random string. You need to put in the hash sign # for the colors to work.

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

Upvotes: 5

Related Questions