jquery - tables2 - vue tables 2 vue
jQuery si DIV no tiene clase "x" (7)
En jQuery necesito hacer una sentencia if para ver si $ no contiene la clase ''.selected''.
$(".thumbs").hover(function(){
$(this).stop().fadeTo("normal", 1.0);
},function(){
$(this).stop().fadeTo("slow", 0.3);
});
Básicamente, cuando esta función se ejecuta (al pasar el mouse) no quiero realizar los desvanecimientos si la clase ''.selected'' se ha agregado a la div, esto significará que la imagen estará en total opacidad para indicar que está seleccionada. Buscó en Google sin suerte, aunque es una pregunta simple sobre cómo usar una declaración IF ...
¿Qué tal si en lugar de usar un if en el evento, puede desvincular el evento cuando se aplica la clase seleccionada? Supongo que agrega la clase dentro de su código en algún lugar, por lo que al anular el evento se vería así:
$(element).addClass( ''selected'' ).unbind( ''hover'' );
El único inconveniente es que si alguna vez elimina la clase seleccionada del elemento, debe suscribirlo nuevamente al evento de desplazamiento.
Creo que el autor estaba buscando:
$(this).not(''.selected'')
Cuando esté verificando si un elemento tiene o no una clase, asegúrese de que no haya puesto un punto en el nombre de la clase accidentalmente:
<div class="className"></div>
$(''div'').hasClass(''className'');
$(''div'').hasClass(''.className''); #will not work!!!!
Después de mucho 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 para descubrir qué había hecho mal. Revisa tu código!
También puede usar los métodos addClass y removeClass para alternar entre elementos como las pestañas.
p.ej
if($(element).hasClass("selected"))
$(element).removeClass("selected");
Utilice el selector "not ".
Por ejemplo, en lugar de:
$(".thumbs").hover()
tratar:
$(".thumbs:not(.selected)").hover()
jQuery tiene la función hasClass () que devuelve true si algún elemento del conjunto envuelto contiene la clase especificada
if (!$(this).hasClass("selected")) {
//do stuff
}
Echa un vistazo a mi ejemplo de uso.
- Si se desplaza sobre un div, se desvanece con la velocidad normal al 100% de opacidad si el div no contiene la clase ''seleccionada''
- Si se desplaza fuera de un div, se desvanece a una velocidad lenta 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'' a la división roja. Los efectos de desvanecimiento ya no funcionan en la división roja.
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 un 30% de opacidad.
- Al pasar sobre un div, se desvanece hasta el 100% de opacidad, y al pasar se desvanece hasta el 30% de opacidad. Los efectos de atenuación solo funcionan en elementos que no tienen la clase ''seleccionada''
- Al hacer clic en un div agrega / elimina la clase ''seleccionada''
El código jQuery 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>
$(".thumbs").hover(
function(){
if (!$(this).hasClass("selected")) {
$(this).stop().fadeTo("normal", 1.0);
}
},
function(){
if (!$(this).hasClass("selected")) {
$(this).stop().fadeTo("slow", 0.3);
}
}
);
Si se coloca dentro de cada parte del elemento flotante, podrá cambiar la clase de selección dinámicamente y el elemento 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 clic para cambiar la clase seleccionada al elemento seleccionado. Luego disparo el evento flotante en el elemento anterior para que desaparezca.