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

Question

为了更改站点的配色方案，我添加了一个备用类，该类本应使用 .toggleClass() 通过按钮打开和关闭，但是，当我打开类(class)时，当我再次点击按钮时它似乎并没有切换回来。

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

Answer 1

1. 在 toggleClass() 函数中，您必须提供一个 string 代表要检查的类，如果存在则添加/删除/缺席:toggleClass('class');

2. 如果您要执行类似 $('.myClass').toggleClass('myClass') 的操作 - 它只会在您第一次触发时起作用 - 与第二次一样，文档中将不再有带有 .myClass 的元素 - 您只是在之前的函数调用中删除了它。

3. 由于您还没有提供 HTML，我们无法确定 document.querySelector('.forjs button') 是否准确 - 请测试是否准确，或者提供足够的 HTML 代码。

4. 在您的 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 和 vanilla JS 时，建议两者保持一致。

普通 JS:

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

J查询:

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