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

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

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

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

<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 на инпут и делай что нужно.

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



 $('#mode').change(function(){

     if($(this).is(':checked'){

         //код когда чекбокс активировали

     }else{

         //когда деактивировали

     };

 });

Allazarin (06.01.2022 в 16:50)



 $('#mode').change(function(){

     if($(this).is(':checked'){

         //код когда чекбокс активировали

     }else{

         //когда деактивировали

     };

 });

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

<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)

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

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