Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I change the class of an element with jQuery>

I have a JavaScript function that looks like this:

function UpdateFilterView() {   if (_extraFilterExists) {     if ($('#F_ShowF').val() == 1) {       $('#extraFilterDropDownButton').attr('class', "showhideExtra_up");       $('#extraFilterDropDownButton').css("display", "block");       if ($('#divCategoryFilter').css("display") == 'none') {         $('#divCategoryFilter').show('slow');       }       return;     } else {       if ($('#divCategoryFilter').css("display") == 'block') {         $('#divCategoryFilter').hide('slow');       }        $('#extraFilterDropDownButton').css("display", "block");       $('#extraFilterDropDownButton').attr('class', "showhideExtra_down");       return;     }   } else {     if ($('#divCategoryFilter').css("display") != 'none') {       $('#divCategoryFilter').hide('fast');     }     $('#extraFilterDropDownButton').css("display", "none");   } } 

This will be triggered by the following code (from within the $(document).ready(function () {}):

$('#extraFilterDropDownButton').click(function() {     if ($('#F_ShowF').val() == 1) {         $('#F_ShowF').val(0);     } else {         $('#F_ShowF').val(1);     }      UpdateFilterView(); }); 

The HTML for this is easy:

<div id="divCategoryFilter">...</div>  <div style="clear:both;"></div> <div id="extraFilterDropDownButton" class="showhideExtra_down">&nbsp;</div> 

I have two problems with this:

  1. When the panel is hidden and we press the div button (extraFilterDropDownButton) the upper left part of the page will flicker and then the panel will be animated down.

  2. When the panel is shown and we press the div button the panel will hide('slow'), but the button will not change to the correct class even when we set it in the UpdateFilterView script?

The correct class will be set on the button when hovering it, this is set with the following code:

$("#extraFilterDropDownButton").hover(function() {     if ($('#divCategoryFilter').css("display") == 'block') {       $(this).attr('class', 'showhideExtra_up_hover');     } else {       $(this).attr('class', 'showhideExtra_down_hover');     }   },   function() {     if ($('#divCategoryFilter').css("display") == 'block') {       $(this).attr('class', 'showhideExtra_up');     } else {       $(this).attr('class', 'showhideExtra_down');     }   }); 
like image 598
Banshee Avatar asked Mar 05 '11 16:03

Banshee


People also ask

How do you change the class of an element?

To change all classes for an element:document. getElementById("MyElement"). className = "MyClass"; (You can use a space-delimited list to apply multiple classes.)

How can I replace one class with another in jQuery?

To replace a class with another class, you can remove the old class using jQuery's . removeClass() method and then add the new class using jQuery's . addClass() method.

Which jQuery method is used to change the class of a given element?

The method used for adding or removing the class to an element is the toggleClass() method.

How do I select a specific class in jQuery?

In jQuery, the class and ID selectors are the same as in CSS. If you want to select elements with a certain class, use a dot ( . ) and the class name. If you want to select elements with a certain ID, use the hash symbol ( # ) and the ID name.


2 Answers

To set a class completely, instead of adding one or removing one, use this:

$(this).attr("class","newclass"); 

Advantage of this is that you'll remove any class that might be set in there and reset it to how you like. At least this worked for me in one situation.

like image 146
patrick Avatar answered Sep 27 '22 17:09

patrick


Use jQuery's

$(this).addClass('showhideExtra_up_hover'); 

and

$(this).addClass('showhideExtra_down_hover'); 
like image 42
Seth Avatar answered Sep 27 '22 19:09

Seth