时间戳

首页 > 解决方案 > jQuery .toggleClass() 在打开类后不会关闭类

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

标签： javascriptjqueryhtmlcss

解决方案

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

  2. 如果您要做类似的事情$('.myClass').toggleClass('myClass')-它只会在您第一次触发它时起作用-第二次，.myClass文档中将没有更多元素-您只是在上一个函数调用中将其删除。

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

  4. 在您的 CSS 中，您已经定义了当:body类时发生的更改。因此，在您的情况下，应该应用于：.darkbody.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');
});

查询：

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

推荐阅读