Question

为了更改网站的配色方案，我添加了一个备用类，该类假定可以通过使用.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();
    });
  });

Answer 1

请尝试以下操作：$('body').toggleClass('dark');

Answer 2

在toggleClass()函数中，必须提供一个string代表要检查的类，如果存在/不存在，则要添加/删除该类：toggleClass（'class'） ;
如果您要执行类似$('.myClass').toggleClass('myClass')的操作-它只会在您第一次触发时起作用-第二遍时，文档中将不再包含.myClass元素-您刚刚在上一个函数调用中将其删除。
由于您还没有提供HTML，因此我们无法确定document.querySelector('.forjs button')是正确的-请测试是否正确，或者提供足够的HTML代码。
li>
在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');
});

Jquery：

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

Answer 3

  $('.dark').toggleClass('class_name');

http://api.jquery.com/toggleclass/
toggleClass的参数大于零

Answer 4

您需要将要切换的类名作为参数传递。否则，您将切换元素上的所有类（例如，删除它们），这意味着选择器将不再起作用... 在您的元素中添加另一个类（或ID）并使用该元素进行调用

$(".toggle").toggleClass("dark")

jQuery .toggleClass（）在打开类后不会关闭类

4 个答案: