Définir la classe avec jquery?

J’ai une fonction javascript qui ressemble à ceci:

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

Cela sera déclenché par le code suivant (à partir de $ (document) .ready (function () {):

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

Le HTML pour cela est facile:

 
...
 

J’ai deux problèmes avec ceci:

  1. Lorsque le panneau est caché et que nous appuyons sur le bouton div (extraFilterDropDownButton), la partie supérieure gauche de la page scintillera et le panneau sera animé.

  2. Lorsque le panneau est affiché et que nous appuyons sur le bouton div, le panneau se cachera (“lent”), mais le bouton ne changera pas pour la classe correcte même si nous le définissons dans le script UpdateFilterView?

La classe correcte sera définie sur le bouton lors du survol, elle est définie avec le code suivant:

 $("#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'); } }); 

Pour définir une classe complètement, au lieu d’append un ou d’en supprimer un, utilisez ceci:

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

L’avantage de ceci est que vous supprimerez toute classe qui pourrait être définie ici et la réinitialiser à votre guise. Au moins cela a fonctionné pour moi dans une situation.

Utilisez jQuery

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

et

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

J’aime écrire un petit plugin pour rendre les choses plus propres:

 $.fn.setClass = function(classes) { this.attr('class', classes); return this; }; 

De cette façon, vous pouvez simplement faire

 $('button').setClass('btn btn-primary');