Кнопка JQuery Toggle для включения или удаления функции - PullRequest
Новая
       13

Кнопка JQuery Toggle для включения или удаления функции

0 голосов
/ 16 мая 2018

Я пытаюсь создать переключатель для сайта, который будет переключать цвета сайта.Вместо того, чтобы изменять связанный файл CSS, я хотел бы вызвать функцию, чтобы изменить цвета и цвета фона элементов CSS, а затем при повторном нажатии переключателя сайт возвращается в исходное состояние.Я пытался использовать jQuery on() и off(), но пока мне не повезло.Любая помощь будет оценена. 

function toggleColor() {
    $('section').css('background-color', '#fff');
    $('section').css('border', '3px solid #000');
};

$('.switch input:checkbox').change(function(){
    if ( $(this).is(":checked") ) {
        $(this).addClass("active");
        toggleColor();
        console.log('ON');
    } else {
        $(this).removeClass("active");
        console.log('OFF');
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="switch">
    <input type="checkbox">
    <span class="slider round"></span>
</label>

Я также пробовал это: 

$('.switch input:checkbox').on('click', toggleColor );

$('.switch input:checkbox').off('click', toggleColor );

Мне удалось вызвать функцию toggleColor, но есть ли способ убитьотключить или отключить изменения, которые я сделал, используя свойства CSS.Спасибо за помощь.

Ответы [ 2 ]

0 голосов
/ 16 мая 2018

Создайте еще одну функцию для сброса добавленного CSS и вызовите функцию при снятии флажка. 

function toggleColor() {
    $('section').css('background-color', '#cdcdcd');
    $('section').css('border', '3px solid #000');
};

function removeColor() {
  $('section').css('background-color', '#fff');
  $('section').css('border', 'none');
}

$('.switch input:checkbox').change(function(){
    if ( $(this).is(":checked") ) {
        $(this).addClass("active");
        toggleColor();
        console.log('ON');
    } else {
        $(this).removeClass("active");
        removeColor();
        console.log('OFF');
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<label class="switch">
    <input type="checkbox">
    <span class="slider round"></span>
</label>
</section>
0 голосов
/ 16 мая 2018

Сделайте это: 

<label class="switch">
    <input type="checkbox">
    <span class="slider round"></span>
</label>
<style>
   .new-css{
       background-color: #fff;
       border: 3px solid #000;
   }
</style>

(конечно, поместите ваши стили в файл CSS)

и: 

$('.switch input:checkbox').change(function(){
    if ( $(this).is(":checked") ) {
        $(this).addClass("active");
        $('section').addClass("new-css");
    } else {
        $(this).removeClass("active");
        $('section').removeClass("new-css");
    }
});
...