css切换按钮在第一次单击时不会更改类，但是在函数运行完毕后将其删除

Question

我有一个纯CSS切换按钮，每次单击时，我都试图使用javascript（jquery）更改其状态。问题是我第一次单击按钮时，按钮没有相应更改（类输入：checked + .toggle-slider）。在调试器中，我看到它发生了变化，但是在功能时钟运行完毕后，突然由于某种原因删除了类input：checked + .toggle-slider，而它仅有的类是input：focus + .toggle-slider。这使按钮看起来好像从未被单击过。第一次单击后再单击一次，类输入：checked + .toggle-slider最终显示。

出现问题的切换按钮在卡片div中。我尝试将类似的切换按钮放在卡片中，并且在第一次单击时起作用。我想知道是什么阻止了它在div内首次运行？

$(".toggle-slider").click(checkToggleState);

function checkToggleState(e) {
  let checkbox = $($(e.target).siblings()[0]);
  if (checkbox.is(":checked")) {
    checkbox.attr("checked", false);
    console.log("not checked")
  } else {
    checkbox.attr("checked", true);
    console.log("is checked");
  }
}

.toggle {
  float: right;
  position: relative;
  width: 3.5em;
  height: 1.5em;
}

.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--card-shadow-color);
  transition: .4s;
  border-radius: 34px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 1.3em;
  width: 1.3em;
  left: 4px;
  top: 8%;
  background-color: var(--body-bg-color);
  transition: .4s;
  border-radius: 50%;
}

input:checked+.toggle-slider {
  background-color: var(--toggle-on-color);
}

input:focus+.toggle-slider {
  box-shadow: 0 0 3px var(--toggle-on-color);
}

input:checked+.toggle-slider:before {
  transform: translateX(1.7em);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="card">

  <label class="toggle">
    <input type="checkbox">
    <span class="toggle-slider"></span>
    </label>

  <span class="coin-title"><p id="${coin.id}">${coin.symbol.toUpperCase()}</p></span>
  <p>${coin.name}</p>

  <button class="btn">More Info</button>

Answer 1

为什么要为此使用jquery？您的toggle-slider位于复选框的label中。因此，当您单击它时，该复选框会自动切换选中状态（就像您直接单击它一样）。只需使用CSS。也许我不明白您的问题？

.toggle {
  float: right;
  position: relative;
  width: 3.5em;
  height: 1.5em;
}

.toggle input {
  opacity: 0;
  width: 0;
  height: 0;

}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--card-shadow-color);
  transition: .4s;
  border-radius: 34px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 1.3em;
  width: 1.3em;
  left: 4px;
  top: 8%;
  background-color: red;
  transition: .4s;
  border-radius: 50%;
}

input:checked+.toggle-slider {
  background-color: blue;
}

input:focus+.toggle-slider {
  box-shadow: 0 0 3px green;
}

input:checked+.toggle-slider:before {
  transform: translateX(1.7em);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="card">

  <label class="toggle">
    <input type="checkbox">
    <span class="toggle-slider"></span>
    </label>

  <span class="coin-title"><p id="${coin.id}">${coin.symbol.toUpperCase()}</p></span>
  <p>${coin.name}</p>

  <button class="btn">More Info</button>