Не срабатывает toggleClass?

Question

[ZhoraSamodelov]

Есть вот такой код, который формирует несколько конструкций типа <label><input></label>.
Задача стоит, чтобы при клике на label, ему присваивался класс «active», а при повторном клике этот класс убирался.

Но если вставить функцию
$(this).toggleClass("active");
то создаётся пустой класс
<label id="chk_0" class="">
Причём, функция просто добавляющая класс
$(this).addClass("active");
работает в штатном режиме.

function doOp1(ari, back, levelName, b) {
let label = document.createElement('label');
back.appendChild(label);
label.innerHTML = ari.name;
label.setAttribute('id', 'chk_' + b);
let input = document.createElement('input');
label.appendChild(input);
input.setAttribute('id', levelName + '_' + b);
input.setAttribute('name', levelName);
input.setAttribute('type', 'checkbox');
input.setAttribute('value', ari.cost);
let crName = ari.name;
label.addEventListener('click', function() {

$(this).toggleClass("active");

});
}

Comments

[alex]

организуйте код в песочницу какую-нибудь, где вашу проблему будет видно наглядно

[ZhoraSamodelov]

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

Проще собрать всё вместе (html, css и js-код) в одном файле, что я и попробую сделать.

[ZhoraSamodelov]

Вот, примерно, что есть:
moonkiss-sph.com/banner/Calculator_test.rar

Проблема находится в блоке ВЫБОР ОПЦИЙ.

Лэйблы ЭНЕРГОСБЕРЕЖЕНИЕ, СОЛНЦЕЗАЩИТА и т.д. при первом клике должны получать класс «active» (и менять цвет), а при повторном клике возвращаться в исходное состояние.

[Даниил Попов]

ZhoraSamodelov,
Зачем все эти сложности.
1. Откройте https://jsfiddle.net/
2. Вставьте код в нужные поля, нажмите save или update
3. Скопируйте ссылку
Что уж может быть проще

Answer 1

[alex]

Проблема в том, что из-за особенностей <label>, событие клика срабатывает два раза, на непосредственно самом <label> и на <input/> (но обработчик, который висит на <label> все равно его ловит, ибо всплытие), поэтому класс active добавляется и сразу же удаляется. Хотя если кликать непосредственно на сам <input/>, то клик на <label> не будет генерироваться, и класс на<label> будет меняться как и задумано. Выхода я вижу как минимум два:

первый

слушать не click, а change на <input> и если :checked то меням класс

input.addEventListener(function(e){
  if (!e.target.checked) {
    $(label).addClass('active');
    return;
  }
  
  if (e,target.cheked) {
    $(label).removeClass('active');
    return;
  }
});

второй

еще во времена динозавров придумали делать все это на css без лишней головной боли:

<label>
  <input type="checkbox">
  <span>home</span>
</label>

input:checked + span {
  color: red;
}

Comments

[ZhoraSamodelov]

Второй вариант вполне рабочий, хотя и пришлось вставлять лишние span'ы — но это наименьшее зло.