CODEWITHSUNDEEP
javascriptjquerycss
AlwaysStudent
AlwaysStudent

Reputation: 1374

jQuery click to change color is working but something went wrong change font family

I'm trying to make a change color and font-family using the following code. Color is changing but the font-family is not changing. What I'm missing here? How should I fix it?

$(document).ready(function(){
  $("body").on("click",".selectableColor", function(){
      var tColor = $(this).attr("data-color"); 
    $('.change').css('color','#'+tColor+'');
  });
  $("body").on("click",".fontBox", function(){
      var tStyle = $(this).attr("data-style"); 
    $('.change').css('font-family', tStyle); 
  });
});

HTML

    <div class="change_area_header" style="overflow: hidden; outline: currentcolor none medium;" tabindex="2">
      <div class="selectableColor" style="background-color:#ffebee" data-color="ffebee"></div>
      <div class="selectableColor" style="background-color:#ffcdd2" data-color="ffcdd2"></div> 
    </div>
    <!--Font Family-->
    <div class="change_area_header" style="overflow: hidden; outline: currentcolor none medium;" tabindex="4">
      <div class="fontBox" style="font-family: 'Montserrat', sans-serif;" data-style="'Montserrat', sans-serif;">MontSerrat</div>
      <div class="fontBox" style="font-family: 'Aleo', serif;" data-style="'Aleo', serif;">Aleo</div>
      <div class="fontBox" style="font-family: 'Raleway', sans-serif;" data-style="'Raleway', sans-serif;">Raleway</div>
    </div>

DEMO from codepen.io

Upvotes: 1

Views: 82

Answers (4)

user8106148
user8106148

Reputation:

Actually, I believe your thoughts about problem-solving is not true. I saw your codes. why you bind the click action on the body? you can select exact tag by using jQuery and then bind the action callback to it.

Also, you could declare some CSS classes not using inline code in HTML and you can add or remove classes to markup not assigning directly the styles property to the selected element. It's not safe because it is not debuggable. Just like you see you have a little and simple issue that you cannot track and fix it.

I proffer clean your code like below, I write to you a little sample then you complete your whole project by using this sample:

$(document).on('ready', function(){
  var resultEl = $('.result');
  $('.blue').on('click', function(){
    resultEl.removeClass('red').addClass('blue');
  });
  $('.red').on('click', function(){
    resultEl.removeClass('blue').addClass('red');
  });
});
.result {
  font: normal 20px arial;
  margin-bottom: 20px;
}

.blue {
  color: #f00;
  font-family: tahoma;
  margin-bottom: 20px;
  cursor: pointer;
}

.red {
  color: #00f;
  font-family: monospace;
  margin-bottom: 20px;
  cursor: pointer;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div class="result">The Result of color and font</div>
<div class="blue">color&font</div>
<div class="red">color&font</div>

Upvotes: 0

Ijas Ameenudeen
Ijas Ameenudeen

Reputation: 9259

Remove the semi-colons in the font-selectors as

From

data-style="'Montserrat', sans-serif;"

To

data-style="'Montserrat', sans-serif"

which becomes, 

<!–– ... -->
 <div class="fontBox" style="font-family: 'Montserrat', sans-serif;" data-style="'Montserrat', sans-serif">MontSerrat</div>
<!–– ... -->

Pen : https://codepen.io/ijasnijas/pen/wNvPXa

Upvotes: 7

Mohammad Ansari
Mohammad Ansari

Reputation: 1549

Don't use ; end of the data-style="'Montserrat', sans-serif;"

Use : data-style="'Montserrat', sans-serif"

Upvotes: 2

Yasser Shaikh
Yasser Shaikh

Reputation: 47794

You need to escape characters. You statement converts to

$('.change').css('font-family', ''Montserrat', sans-serif;')

Something as simple as $('.change').css('font-family', 'Segoe UI') works in your example.

Also instead of having data-style="'Raleway', sans-serif;" you could only have the font name data-fontname="Raleway" and prepare the font chain in your code.

Upvotes: 1

Related Questions