jQuery .toggleClass() does not toggle off the class after its toggled on

Question

In order to change the color scheme of the site, I've added an alternate class that was suppose to toggle on and off through a button with the usage of .toggleClass() , however, when I do toggle the class on, it doesn't seem to toggle back off when I click on the button again.

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

1. In the toggleClass() function you must be provided with a string representing the class to be checked for, and to be added/removed if present/absent: toggleClass('class');

2. If you were to do something like $('.myClass').toggleClass('myClass') - it would only work the first time you fire it - as the second time, there would be no more elements with .myClass in the document - you just removed it in the previous function call.

3. As you have not provided the HTML also, we cannot know for sure that the document.querySelector('.forjs button') is accurate - please test if this is so, or provide the adequate HTML code.

4. In your CSS, you have defined the changes to take place when the body has a class of .dark : body.dark {} . So, in your case, the toggleClass() should be applied to the $(body) : $('body').toggleClass('dark');

You end function should be :

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

As you are mixing JQuery and vanilla JS, it would be advisable to keep consistent with one or the other.

Vanilla 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 have parameter more than zero

Answer 4

You need to pass the class name you want to toggle as a parameter. Otherwise you'll toggle all the classes on the element (eg remove them) meaning the the selector will no longer work... Add another class (or id) to your element and call using that

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