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

Question

我有一个纯 css 切换按钮，每次单击它时我都尝试使用 javascript (jquery) 更改其状态。问题是我第一次单击按钮时，切换不会相应更改（类输入：checked + .toggle-slider）。在调试器中我看到它发生了变化，但是在功能块完成运行后，突然类 input:checked + .toggle-slider 由于某种原因被删除，它唯一的类是 input:focus + .toggle-slider。这使按钮看起来好像从未被点击过。在第一次单击和下一次单击后，类 input: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>

标签： javascriptjquerycsstogglebutton

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>