jQuery si DIV no tiene la clase "x"

211

En jQuery necesito hacer una declaració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 quiero realizar los desvanecimientos si la clase '.selected' se ha agregado al div, esto significará que la imagen tendrá una opacidad completa para indicar que está seleccionada. Busqué en Google sin suerte a pesar de que es una simple pregunta de cómo usar una declaración IF ...

jquery zuk1
fuente

Respuestas:

359

Use el selector "no ".

Por ejemplo, en lugar de:

$(".thumbs").hover()

tratar:

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

alphadogg
fuente
pensar en ello, si el OP es la adición de la clase a la div en algún momento después document.ready entonces no creo que su sintaxis trabajará
Russ Cam
@ zuk1: Bueno, desde tu fragmento, tomas todos los elementos con la clase 'pulgar' y haces un desplazamiento () en cada uno. ¿Estás diciendo que solo quieres desplazarte sobre un elemento? ¿Cuál es ese elemento? Estoy confundido.
alphadogg
@Russ: Correcto. Si usa lo anterior, tomará todos los elementos actualmente en el DOM en el momento en que se ejecute, y para aquellos con la clase 'pulgar' y no 'seleccionado' se desplazará ().
alphadogg
Si necesita hacer esto fuera del selector por alguna razón, puede usarlo .not( ".selected" )y funcionará igual. Cosas brillantes
Joshua Pinter
180

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

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

Mira mi ejemplo de uso

  • Si pasa el cursor sobre un div, se desvanece como velocidad normal al 100% de opacidad si el div no contiene la clase 'seleccionada'
  • Si se desplaza fuera de un div, se desvanece a baja velocidad hasta un 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">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body { background-color: #FFF; font: 16px Helvetica, Arial; color: #000; }
</style>


<!-- jQuery code here -->
<script type="text/javascript">
$(function() {

$('#myButton').click(function(e) {
$('#div2').addClass('selected');
});

$('.thumbs').bind('click',function(e) { alert('You clicked ' + e.target.id ); } );

$('.thumbs').hover(fadeItIn, fadeItOut);


});

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); 
 } 
}
</script>


</head>
<body>
<div id="div1" class="thumbs" style=" background-color: #0f0; margin: 10px; padding: 10px; width: 100px; height: 50px; clear: both;"> 
One div with a thumbs class
</div>
<div id="div2" class="thumbs" style=" background-color: #f00; margin: 10px; padding: 10px; width: 100px; height: 50px; clear: both;">
Another one with a thumbs class
</div>
<input type="button" id="myButton" value="add 'selected' class to red div" />
</body>
</html>

EDITAR:

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

  • Ambos divs comienzan con una opacidad del 30%
  • Al pasar el cursor sobre un div se desvanece al 100% de opacidad, al pasar el cursor se desvanece al 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); 
 } 
}

<div id="div1" class="thumbs" style=" background-color: #0f0; margin: 10px; padding: 10px; width: 100px; height: 50px; clear: both; cursor:pointer;"> 
One div with a thumbs class
</div>
<div id="div2" class="thumbs" style=" background-color: #f00; margin: 10px; padding: 10px; width: 100px; height: 50px; clear: both; cursor:pointer;">
Another one with a thumbs class
</div>
Russ Cam
fuente
no funciona por alguna razón :( $ (". thumbs"). hover (function () {if (! ($ (this) .hasClass (". selected")) {$ (this) .stop (). fadeTo ("normal", 1.0);}, function () {$ (this) .stop (). fadeTo ("slow", 0.3);}}); y rompe mi código completo, ninguno de los JS funciona con eso agregó
zuk1
¿hasClass requiere el.? hasClass ('selected') en lugar de hasClass ('. selected')
bendewey
¿El ejemplo de Russ puede funcionar si usa "seleccionado" en lugar de ".seleccionado"?
alphadogg
disculpas, no quise poner el. ahí. Actualizado ahora
Russ Cam
Agregué algunos ejemplos a mi respuesta, para mostrar que el código funciona
Russ Cam
28

Creo que el autor estaba buscando:

$(this).not('.selected')
robar
fuente
1
No esperaba que esto funcionara. Incluso funciona como $ (". Class1"). Not (". Class2") que es exactamente lo que buscaba. ¡Gracias!
kravits88
3
Funciona, pero vale la pena señalar que esto no funciona como un booleano, ya que devuelve una matriz. Las matrices vacías son "veraces" en Javascript. Podrías usarlo $(this).not('.selected').lengthcomo booleano si realmente quisieras, pero eso es un poco detallado.
Joe Maffei
5

Cuando verifique si un elemento tiene o no una clase, asegúrese de no haber puesto accidentalmente un punto en el nombre de la clase:

<div class="className"></div>

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

Después de mucho tiempo mirando mi código, me di cuenta de que había hecho esto. Un pequeño error tipográfico como este me tomó una hora para descubrir qué había hecho mal. ¡Comprueba tu código!

Andrés
fuente
1 
$(".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 if dentro de cada parte del elemento emergente le permitirá cambiar la clase de selección dinámicamente y el elemento activa seguirá funcionando.

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

Como ejemplo, también adjunté un controlador de clic para cambiar la clase seleccionada al elemento seleccionado. Luego, disparo el evento de desplazamiento sobre el elemento anterior para que desaparezca.

Jeff Adams
fuente
0

También puede usar los métodos addClass y removeClass para alternar entre elementos como pestañas.

p.ej

if($(element).hasClass("selected"))
   $(element).removeClass("selected");
Tawani
fuente
¿Por qué no usar toggleClass ()?
Russ Cam
1
Porque el elemento podría tener otras clases.
Tawani
0

¿Qué tal si en lugar de usar un if dentro del evento, desvincula el evento cuando se aplica la clase select? Supongo que agrega la clase dentro de su código en algún lugar, por lo que desvincular el evento allí se vería así:

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

El único inconveniente es que si alguna vez elimina la clase seleccionada del elemento, debe suscribirse nuevamente al evento de desplazamiento.

Juan
fuente