В моем приложении у меня есть значки, а под значками я ввел числа. Поэтому мое требование заключается в том, что когда мы нажимаем на значок, конкретный номер под значком должен быть выделен жирным шрифтом.

< Сильный > .component.html

<div class="container">
<span class="iconss"></span><i  class="stl icon icon-onlife-smiley-face-1"></i>
  <span class="iconss"></span><i  class="stl icon icon-onlife-face-2"></i>
  <span class="iconss"></span><i  class="stl icon icon-onlife-face-3"></i>
  <span class="iconss"></span><i  class="stl icon  icon-onlife-face-4"></i>
  <span class="iconss"></span><i  class="stl icon icon-onlife-face-5"></i>
  <span class="iconss"></span><i  class="stl icon icon-onlife-face-6"></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;
}

component.ts

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

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

Я пробовал с помощью метода ниже, но не работает


 $(".stl").click(function() {
     
  $(".iconss").addClass("active");
      
   $(this).addClass("active");
   });

Может ли кто-нибудь помочь мне в этом же.

0
Chitty reddy 4 Фев 2022 в 01:12
Смешивание angular и jquery... почему???
 – 
R. Richards
4 Фев 2022 в 01:27

2 ответа

Вам нужно добавить класс active в .iconss, который находится перед щелчком .stl. Этого можно достичь с помощью prev() родственного элемента. Дополнительная информация о селекторах братьев и сестер: https://www.w3schools.com/jquery/jquery_traversing_siblings.asp< /а>

$(".stl").click(function() {
    $(".stl, .iconss").removeClass("active");
    $(this).addClass("active");
    $(this).prev().addClass("active");
})
0
Amirreza Noori 4 Фев 2022 в 01:28