如何根據點擊事件啟用和禁用切換開關

Question

在我的應用程序中，我有一些圖標，右側有一個切換按鈕，默認情況下它必須處於活動狀態，右側有粗體文本。

我的要求是當我們從右側的撥動開關上方單擊任何圖標（它會改變顏色）時，應該關閉，並且文本必須靜音。 反之亦然（當我們單擊切換開關時，必須刪除圖標的顏色）。

我的代碼是

.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");
});

我嘗試了多種方法，但我無法做到。

Answer 1

我不得不用數字模擬圖標 - 但邏輯就在那里。 請查看 HTML、CSS 和 JS 中的更改：

• 添加了包裝器和容器類（HTML、CSS）以包含 & position 切換按鈕
• JS 非常簡單——一個實用程序 function 和兩個點擊處理程序。

 const removeIconActiveClass = () => { $(".stl").each((i, el) => { $(el).removeClass('active') }) } $(".stl").click(function() { removeIconActiveClass() $(this).addClass('active') $(".rating-checkbox").attr("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>

Answer 2

在此處檢查此解決方案，在 angular 中完成

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