¿Establecer clase con jquery?

Question

que tienen una función de JavaScript que tiene este aspecto:

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

Esto se desencadena por el siguiente código (desde dentro del $ (document) ready (function() {):

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

    UpdateFilterView(); 
}); 

El HTML de esto es fácil:

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

tengo dos problemas con este:

1. Cuando el panel está oculto y presionamos el botón div (extraFilterDropDownButton), la parte superior izquierda de la página parpadeará y luego el panel se animará hacia abajo.

2. Cuando se muestra el panel y presionamos el botón div, el panel se ocultará ('lento'), pero el botón no cambiará a la clase correcta incluso cuando lo configuremos en el script UpdateFilterView.

La clase correcta se encuentra en el botón cuando se cierne, esto se establece con el siguiente código:

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

Answer 1

Uso de jQuery

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

y

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

Answer 2

Para configurar una clase por completo, en lugar de anuncios ding uno o eliminación de uno, utilizan este:

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

ventaja de esto es que usted va a quitar cualquier clase que pudiera establecerse allí y lo restablece a la forma en que te gusta. Al menos esto funcionó para mí en una situación.

Answer 3

<script> 
$(document).ready(function(){ 
     $('button').attr('class','btn btn-primary'); 
}); </script> 

Answer 4

me gustaría escribir un pequeño plugin para hacer las cosas más limpio:

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

De esa manera usted puede simplemente hacer

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