javascript - JQuery 切换按钮打开或删除功能

Question

我正在尝试为将切换网站颜色的网站创建一个切换复选框。我不想更改链接的 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 属性所做的更改。感谢您的帮助。

Answer 1

这样做:

<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");
    }
});