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

enter image description here

И мое требование, когда мы нажимаем на любой из значков (он изменит цвет) сверху, тумблер с правой стороны должен быть выключен, а текст должен быть отключен. И наоборот (когда мы нажимаем на тумблер, цвет значка должен быть удален).

Мой код

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

<div class="container">
  <div class="row">
    <div class="form-group col-sm-8">
      <img src="../assets/img/dividers.png" />
      <label class="clinical-form-label" for="power">Confidence Scale:</label>
      <p class="conf">Select Confidence level</p>
    </div>
    <div class="col-md-4">
      <label class="rating-switch">
        <input class="rating-checkbox" type="checkbox" checked />
        <div class="slide round"></div>
      </label>
    </div>
    <div class="no-rating-switch col-md-2">No</div>
  </div>
  <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

.switch,
.rating-checkbox {
  opacity: 0;
  width: 0;
  height: 0;
}
.slide {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.slide:before {
  position: absolute;
  content: "";
  height: 17px;
  width: 17px;
  left: 1.2px;
  bottom: 2px;
  top: 0.5px;
  background-color: #2b547e;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.rating-checkbox:checked + .slide {
  background-color: #87d3f8;
}

.rating-checkbox:focus + .slide {
  box-shadow: 0 0 1px #87d3f8;
}

.rating-checkbox:checked + .slide:before {
  -webkit-transform: translateX(29px);
  -ms-transform: translateX(29px);
  transform: translateX(29px);
}
.slide.round {
  border-radius: 34px;
}

.slide.round:before {
  border-radius: 50%;
}

.no-rating-switch {
  margin-left: -1.5em;
  margin-top: 2.8em;
}

И приведенный ниже код, который я использовал для переключения цвета значка, когда мы нажимаем на него

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

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

Я пробовал несколько способов, но я не могу это сделать.

0
Chitty reddy 3 Фев 2022 в 23:08
Я думаю, это поможет вам проверить blog.angular-university.io/angular-ngclass -ngstyle
 – 
Robin Chauhan
3 Фев 2022 в 23:17

2 ответа

Пришлось издеваться над иконками с цифрами - но логика есть. Пожалуйста, посмотрите на изменения в HTML, CSS и JS:

  • были добавлены классы-оболочки и контейнеры (HTML, CSS), чтобы содержать и позиционировать кнопку переключения.
  • JS довольно прост - одна служебная функция и два обработчика кликов.
const removeIconActiveClass = () => {
  $(".stl").each((i, el) => {
    $(el).removeClass('active')
  })
}

$(".stl").click(function() {
  removeIconActiveClass()
  $(this).addClass('active')
  $(".rating-checkbox").prop("checked", false)
  $(".no-rating-switch").addClass("text-muted")
});

$(".rating-checkbox").on("click", function() {
  removeIconActiveClass()
  $(".no-rating-switch").removeClass("text-muted")
})
.stl {
  cursor: pointer;
}

.stl:hover {
  color: blue;
}

.stl.active {
  color: red;
}

.switch,
.rating-checkbox {
  opacity: 0;
  width: 0;
  height: 0;
}

.rating-switch-wrapper {
  position: relative;
}
.rating-text-container {
  align-items: center;
  gap: 10px;
}

.slide {
  position: absolute;
  cursor: pointer;
  height: 20px;
  width: 52px;
  top: 50%;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  transform: translateY(-50%);
}

.slide:before {
  position: absolute;
  content: "";
  height: 17px;
  width: 17px;
  left: 3.2px;
  bottom: 2px;
  top: 0.5px;
  background-color: #2b547e;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.rating-checkbox:checked+.slide {
  background-color: #87d3f8;
}

.rating-checkbox:focus+.slide {
  box-shadow: 0 0 1px #87d3f8;
}

.rating-checkbox:checked+.slide:before {
  -webkit-transform: translateX(29px);
  -ms-transform: translateX(29px);
  transform: translateX(29px);
}

.slide.round {
  border-radius: 34px;
}

.slide.round:before {
  border-radius: 50%;
}

.no-rating-switch {}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="form-group col-8">
      <!-- please, never provide local routes in a snippet
      they not only do not work, but confuse the others -->
      <img src="" />
      <label class="clinical-form-label" for="power">Confidence Scale:</label>
      <p class="conf">Select Confidence level</p>
    </div>
    <div class="col-4">
      <div class="rating-text-container d-flex">
        <div class="no-rating-switch font-weight-bold">No</div>
        <div class="rating-switch-wrapper">
          <label class="rating-switch">
          <input class="rating-checkbox" type="checkbox" checked />
          <div class="slide round"></div>
        </label>
        </div>
      </div>
    </div>
  </div>
  <i class="stl icon icon-onlife-smiley-face-1">1</i>
  <i class="stl icon icon-onlife-face-2">2</i>
  <i class="stl icon icon-onlife-face-3">3</i>
  <i class="stl icon icon-onlife-face-4">4</i>
  <i class="stl icon icon-onlife-face-5">5</i>
  <i class="stl icon icon-onlife-face-6">6</i>
</div>
0
muka.gergely 4 Фев 2022 в 00:46
Использование jquery не рекомендуется, если кто-то использует Angular. Для проекта Angular должно быть предоставлено решение на основе angular?
 – 
HassanMoin
4 Фев 2022 в 01:05

Проверьте это решение здесь, выполненное в angular

https://stackblitz.com/edit/angular-ivy-bvwone?file=src/app/app.component.ts

0
jyo 4 Фев 2022 в 01:59