javascript - jQuery .toggleClass()在打开类后不会关闭类

为了更改网站的配色方案，我添加了一个备用类，该类应该通过使用.toggleClass()的按钮来打开和关闭，但是当我打开该类时，它不会当我再次单击该按钮时，似乎无法切换回去。

的CSS

/*
Alternate color (dark) scheme
*/
 body.dark {
    background-color:#1e1d1b;
}
body.dark #main {
    background:#292826 url(background_dark_slice.jpg) repeat-x;
}
body.dark #main .container {
    background-image:url(background_dark.jpg);
}
body.dark #footer {
    background-image:url(background_dark_footer.jpg);
}
body.dark ul#menu li a.active, ul#menu li a:hover {
    color:#ffffff;
}

jQuery的

$(document).ready(function(){
    var button = document.querySelector('.forjs button');
    button.addEventListener('click', function(){
        $('.dark').toggleClass();
    });
  });

最佳答案

在toggleClass()函数中，必须为表示要检查的类提供string，如果存在/不存在，则要添加/删除该类：toggleClass（'class'）;
如果您要执行类似$('.myClass').toggleClass('myClass')的操作-仅在第一次触发它时才起作用-第二次，则文档中将不再包含.myClass元素-您只是在上一个函数调用中将其删除了。
由于您还没有提供HTML，因此我们无法确定document.querySelector('.forjs button')是否正确-请测试是否正确，或者提供足够的HTML代码。
在CSS中，您已定义了body具有.dark：body.dark {}类时要进行的更改。因此，根据您的情况，toggleClass()应该应用于$(body)：$('body').toggleClass('dark');


您的最终功能应为：

$(document).ready(function(){
    var button = document.querySelector('.forjs button');
    button.addEventListener('click', function(){
        $('body').toggleClass('dark');
    });
});

当您混合使用JQuery和香草JS时，建议彼此保持一致。

香草JS：

document.querySelector('.forjs button').addEventListener('click', function(){
   document.body.classList.toggle('dark');
});

jQuery的：

$('.forjs button').on('click', function(){
    $('body').toggleClass('dark');
});

关于javascript - jQuery .toggleClass()在打开类后不会关闭类，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55832282/