Bymas | Замена класса по клику, плачу 50р

Тема закрыта by

Ivlev
Причина: Решено

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

html

   <script>    $(document).ready(function() {     $("#switch").focus(function(){         $("#switch").removeClass("switch switch-white").addClass("switch switch-dark");     }).blur(function(){         $("#switch").removeClass("switch switch-dark").addClass("switch switch-white");     }); }); </script>        <label class="ml-2 toggle-switchy" for="mode" data-size="sm">                 <input checked type="checkbox" id="mode">                 <span class="toggle">                   <span id="switch" class="switch switch-dark"></span>                 </span>               </label>

________
посл. ред. 06.01.2022 в 17:56; всего 1 раз(а); by Hryhorii_Ivlev

Не работает замена

Hryhorii_Ivlev (06.01.2022 в 15:34)
Не работает замена

Не смущает, что меняться класс должен при изменении состояния чекбокса, а в js ты вешаешь событие на span? Вешай change на инпут и делай что нужно.

Allazarin (06.01.2022 в 15:45)

Не смущает, что меняться класс должен при изменении состояния чекбокса, а в js ты вешаешь событие на span? Вешай change на инпут и делай что нужно.

Можно пример?)

javascript

   $('#mode').change(function(){     if($(this).is(':checked'){         //код когда чекбокс активировали     }else{         //когда деактивировали     }; });

Allazarin (06.01.2022 в 16:50)

javascript

   $('#mode').change(function(){     if($(this).is(':checked'){         //код когда чекбокс активировали     }else{         //когда деактивировали     }; });

спасибо, а можно на моем примере, ибо же в js не шарю(

html

   <script> $('#mode').change(function(){      if($(this).is(':checked'){          $("#mode").removeClass("switch-white").addClass("switch-dark");       }else{ $("#mode").removeClass("switch-dark").addClass("switch-white");      };  }); </script>        <label class="ml-2 toggle-switchy" for="mode" data-size="sm">                 <input checked class="switch-white" type="checkbox" id="mode">                 <div class="toggle">                   <div class="switch"></div>                 </div>               </label>

Вот так на белый меняет так как указан switch-white в input
________
посл. ред. 06.01.2022 в 17:03; всего 1 раз(а); by Hryhorii_Ivlev

Во-первых логическая ошибка: страница грузится с чекбоксом в состоянии checked, и классом switch-white, а в коде когда чекбокс при изменении состояния активирован ты убираешь switch-white и ставишь switch-dark. Либо в коде инвертируй условие, либо убери checked в инпуте, либо класс на switch-dark.
Второе - тебе же надо менять класс у дива с классом switch? Ну дак и воткни в теле функции вместо #mode селектор .switch

Allazarin , все равно не понимаю 🤣

Hryhorii_Ivlev (06.01.2022 в 17:23)
Allazarin , все равно не понимаю 🤣

Я в тебя верю, ты справишься.

Allazarin (06.01.2022 в 17:28)

Я в тебя верю, ты справишься.

Ну код смены хоть правильный?)