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

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

0 голосов
/ 24 октября 2019

У меня есть чистая кнопка переключения CSS, и я пытаюсь изменить ее состояние, используя javascript (jquery) при каждом нажатии. проблема заключается в том, что когда я нажимаю кнопку в первый раз, переключатель не изменяется соответственно (ввод класса: флажок + .toggle-slider). в отладчике я видел, как он меняется, но после того, как функциональный блок завершает работу, неожиданно по какой-то причине удаляется вход класса: флажок + .toggle-slider, и единственный класс, который у него есть, - это input: focus + .toggle-slider. что заставляет кнопку выглядеть так, как будто она никогда не была нажата. после первого щелчка и при следующих щелчках, наконец, отображается ввод класса: флажок + .toggle-slider.

кнопка переключения, которая имеет проблему, находится в карте памяти. я попытался поместить подобную кнопку-переключатель не в карту, и она сработала при первом нажатии. Интересно, что мешает ему работать в первый раз внутри 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>

1 Ответ

0 голосов
/ 24 октября 2019

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