jQuery si DIV no tiene clase “x”

En jQuery necesito hacer una instrucción if para ver si $ this no contiene la clase ‘.selected’.

$(".thumbs").hover(function(){ $(this).stop().fadeTo("normal", 1.0); },function(){ $(this).stop().fadeTo("slow", 0.3); }); 

Básicamente, cuando se ejecuta esta función (al pasar el mouse) no deseo realizar los fundidos si la clase ‘.selected’ se ha anexado al div, esto significará que la imagen estará en plena opacidad para indicar que está seleccionada. Busqué en Google sin suerte a pesar de que es una simple cuestión de cómo usar una statement IF …

Use el selector “no “.

Por ejemplo, en lugar de:

$(".thumbs").hover()

tratar:

$(".thumbs:not(.selected)").hover()

jQuery tiene la función hasClass () que devuelve verdadero si algún elemento en el conjunto envuelto contiene la clase especificada

 if (!$(this).hasClass("selected")) { //do stuff } 

Eche un vistazo a mi ejemplo de uso

  • Si pasa el mouse sobre un div, se desvanece como velocidad normal al 100% de opacidad si el div no contiene la clase ‘seleccionada’
  • Si pasas el cursor sobre un div, se desvanece a baja velocidad hasta el 30% de opacidad si el div no contiene la clase ‘seleccionada’
  • Al hacer clic en el botón, se agrega la clase “seleccionada” al div rojo. Los efectos de desvanecimiento ya no funcionan en el div rojo

Aquí está el código para ello

 < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    Sandbox       
One div with a thumbs class
Another one with a thumbs class

EDITAR:

esto es sólo una suposición, pero ¿estás tratando de lograr algo como esto ?

  • Ambos divs comienzan en 30% de opacidad
  • Al pasar el cursor sobre un div se desvanece al 100% de opacidad, se desvanece un 30% de opacidad. Los efectos de fundido solo funcionan en elementos que no tienen la clase ‘seleccionada’
  • Al hacer clic en un div se agrega / elimina la clase ‘seleccionada’

jQuery Code está aquí-

 $(function() { $('.thumbs').bind('click',function(e) { $(e.target).toggleClass('selected'); } ); $('.thumbs').hover(fadeItIn, fadeItOut); $('.thumbs').css('opacity', 0.3); }); function fadeItIn(e) { if (!$(e.target).hasClass('selected')) { $(e.target).fadeTo('normal', 1.0); } } function fadeItOut(e) { if (!$(e.target).hasClass('selected')) { $(e.target).fadeTo('slow', 0.3); } } 
One div with a thumbs class
Another one with a thumbs class

Creo que el autor estaba buscando:

 $(this).not('.selected') 

Cuando está comprobando si un elemento tiene o no una clase, asegúrese de no poner accidentalmente un punto en el nombre de la clase:

 
$('div').hasClass('className'); $('div').hasClass('.className'); #will not work!!!!

Después de un largo tiempo de mirar mi código, me di cuenta de que había hecho esto. Un pequeño error tipográfico como este me llevó una hora descubrir qué había hecho mal. ¡Revisa tu código!

 $(".thumbs").hover( function(){ if (!$(this).hasClass("selected")) { $(this).stop().fadeTo("normal", 1.0); } }, function(){ if (!$(this).hasClass("selected")) { $(this).stop().fadeTo("slow", 0.3); } } ); 

Poner un si dentro de cada parte del vuelo estacionario le permitirá cambiar la clase de selección de forma dinámica y el vuelo estacionario seguirá funcionando.

 $(".thumbs").click(function() { $(".thumbs").each(function () { if ($(this).hasClass("selected")) { $(this).removeClass("selected"); $(this).hover(); } }); $(this).addClass("selected"); }); 

Como ejemplo, también he adjuntado un controlador de clics para cambiar la clase seleccionada al elemento cliqueado. Luego disparo el evento de desplazamiento sobre el elemento anterior para que se desvanezca.

También puede usar los métodos addClass y removeClass para alternar entre elementos tales como tabs.

p.ej

 if($(element).hasClass("selected")) $(element).removeClass("selected"); 

¿Qué tal si, en lugar de usar un if dentro del evento, desenlaza el evento cuando se aplica la clase select? Supongo que agregas la clase dentro de tu código en alguna parte, por lo que al desvincular el evento se vería así:

 $(element).addClass( 'selected' ).unbind( 'hover' ); 

El único inconveniente es que si alguna vez eliminas la clase seleccionada del elemento, tienes que suscribirla nuevamente al evento hover.