2010-06-29 8 views
5

¿Hay alguna manera de desencadenar un evento en jQuery cuando se cambian las clases de elementos?Cambio de nombre de clase Evento en jQuery

Ejemplos:

<img class="selected" /> 

en

<img class="selected newclass" /> 

desencadena un evento


Y

<img class="selected" /> 

en

<img class="" /> 

activar un evento

+1

¿Qué desea hacer cuando esto sucede? –

Respuesta

9

Usted puede ser capaz de solucionar en un poco hacky . Hook.addClass() & .removeClass() así:

var _addClass = $.fn.addClass, 
    _removeClass = $.fn.removeClass; 

$.fn.addClass = function(){ 
    // do whatever here 
    return _addClass.apply(this, arguments); 
} 

$.fn.removeClass = function(){ 
    // do whatever here 
    return _removeClass.apply(this, arguments); 
} 

De esa manera, suponiendo que son sólo interesado en ver los cambios de clase elementos con jQuery , puede activar cualquier código en adding o removing clases. De nuevo, solo si está usando jQuery, para este ejemplo.

Por supuesto, puede hook y overwrite cualquier función de javascript de esa manera.

Como Nick Craver mencionado en un comentario, hay varios otros métodos de jQuery que pueden add o remove una clase de elementos. Usted tendría que hook todos aquellos, a saber:

.addClass() 
.removeClass() 
.toggleClass() 
.removeAttr('class') 
.attr('class', 'changed') 

menos que sepa exactamente qué métodos son llamados para manipular una clase, usted tendría que preocuparse por todo eso.

+0

+1 por tener esta idea ..! – Kai

+0

+1 Solución elegante. – jensgram

+1

Elegante, pero tenga en cuenta otros métodos aquí, '.toggleClass()', '.attr ('class')', '.class =', hay un * lot * de formas de cambiar una clase. Estoy pensando que hay una solución aún más simple, pero necesito saber qué es lo que busca el OP. Además, '.addClass ('alreadyHadThisClass')' y '.removeClass ('DidNotHaveThis')' no tienen ningún efecto neto, necesitarás manejar esto también. –

-1

No creo que esto es posible.

Los eventos se basan en las acciones del usuario, por lo que hacer clic, hacer clic, pasar el ratón, etc., son todas acciones del usuario.

Es posible que desee crear una especie de bloque de datos en cada elemento y luego construir un pequeño sistema que se integra en jQuery .class() y .attr() métodos de manera que cuando el código actualiza una clase que se sumará datos a ese elemento de sujeción de la clase anterior ,

luego, si la clase anterior es diferente a la clase que se está configurando, active sus eventos.

lo que entiendo por integro es

var old_ClassFunc = $.fn.class; //Save it 

var $.fn.class = function() 
{ 
    if($(this).data('old-class')) 
    { 
     if($(this).data('class_callback'))# 
     { 
      $(this).data('class_callback')(this); 
     } 
    } 
    $(this).data('old-class',$(this).attr('class')); //Update Data 
    return old_class.apply(this,arguments); 
} 

entonces usted puede hacer como

$('element').data('class_callback',function(context){ 
    alert('Element class has changed'); 
}) 

Hope esto le da un poco de ayuda

+1

-1 para "Los eventos se basan en acciones del usuario" – sbichenko

Cuestiones relacionadas