Кнопка переключения css не меняет класс при первом нажатии, но затем удаляет ее после завершения работы функции

Question 1

У меня есть кнопка переключения чистого css, и я пытаюсь изменить ее состояние с помощью javascript (jquery) каждый раз, когда она нажимается. проблема в том, что при первом нажатии на кнопку переключатель не меняется соответственно (ввод класса: проверено + .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>

javascript jquery css togglebutton

0

user12268475 24 Окт 2019 в 14:47

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

–

Turnip

24 Окт 2019 в 14:52

Answer

Почему вы используете 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>

0

Mihai T 24 Окт 2019 в 15:34

Question 2

Почему вы используете 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>

0

Mihai T 24 Окт 2019 в 15:34

Кнопка переключения css не меняет класс при первом нажатии, но затем удаляет ее после завершения работы функции

1 ответ

Похожие вопросы

Новые вопросы

javascript