JQuery addClass not working.

Question

First of all, I checked all the newbie mistakes. According to Firebug, that element has no class attribute set untill the addClass is called and then the class attribute is set to "".

Javacript:

$("#filter_banned").change(function(){
 if ($("#filter_banned").is(":checked")) $("#admin-userList").addClass("appliedFilter_banned");
 $("#admin-userList").removeClass("appliedFilter_banned");
})

The addclass is getting called, and then wrapping it in alert(e.length) alerts 1 so I know it not only finds admin-userList, but also calls the if thingy.

Also, #admin-userList is a <ul> tag.

And now here is my CSS:

.appliedFilter_banned .user.banned { display: none; }

Is supposed to just be a list displaying all the site users, and a checkbox to hide any ones that have been banned.

Answer 1

I might be missing something, but it looks like you're adding the class "appliedFilter_banned", and then immediately removing it. Are you missing an else?

Answer 2

I could be mis-reading something here, but isn't this line:

$("#admin-userList").removeClass("appliedFilter_banned");

just removing the class you wanted set straight away?

Answer 3

Use the click event handler instead of change.

Answer 4

Attention, you should write correctly the IF:

$("#filter_banned").change(function(){

  var ul = $("#admin-userList");

  if ( $(this).is(":checked") ) {
    ul.addClass("appliedFilter_banned");
  } else {    
    ul.removeClass("appliedFilter_banned");
  }

})

Answer 5

please try this

$("#filter_banned").change(function(){

$("#filter_banned").is(':checked') ? $("#admin-userList").hide(): $("#admin-userList").show();

})