how to change the font style when clicking on the icon-CodePudding

In my application I have the icons and below the icons I have entered the numbers . So my requirement is when we click on the icon the particular number on below of the icon should be turned to bold.

.component.html

<div >
    <label >
      <input  type="checkbox" checked >
      <div  id="toggleSwitch">
</div>
    </label>    <span  >No Rating</span>

  </div>

<div >
<span ></span><i  ></i>
  <span ></span><i  ></i>
  <span ></span><i  ></i>
  <span ></span><i  ></i>
  <span ></span><i  ></i>
  <span ></span><i  ></i>
  </div>

.component.css

.stl{
 
  font-size:35px;
  display:inline-block;

}
.iconss{
  position: relative;
  left: 22px;
  top: 20px;
}
.iconss:after{
  content: counter(number);
  counter-increment: number;
}
.iconss.active{
  font-weight: bold;
}

.stl.active {
  
  color: yellow;
}
.no-rating-switch{
  font-weight: bold;
}

.no-rating-switch.disable{
font-weight: lighter;
}
//and written some styles for toggle button

component.ts

$(".stl").click(function() {
      $(".stl").removeClass("active");
      

      $(this).addClass("active");
})

Can anyone help me on the same.

CodePudding user response：

Don't mixe JQuery and Angular. And to answer your question, it's better to use ngClass Look at this example: Change background color of the button on click

CodePudding user response：

Not sure if this is what is causing the error but in your css on the last line you wrote // for a comment but comments in css are made by using /* and */

What You Can Also Do Is: add a js file with jQuery then do

$(document).ready(function(){

    $(".foo").click(function(){
    //Code Goes Here
    }})

CodePudding user response：

You need to add class active to .iconss which is before the clicked .stl. This can achieve by using prev() sibling. More Information about sibling selectors: https://www.w3schools.com/jquery/jquery_traversing_siblings.asp

$(".stl").click(function() {
    $(".stl, .iconss").removeClass("active");
    $(this).addClass("active");
    $(this).prev().addClass("active");
    $(".no-rating-switch").addClass("disable")
})

$(".rating-switch").click(function() {
    $(".no-rating-switch").addClass("disable")
})