javascript - pagina - ¿Cómo agrego o elimino dinámicamente las clases asociadas a un elemento usando jquery?
funcion load javascript (4)
Estoy intentando agregar y eliminar clases dinámicamente usando jQuery en mi página web. Aquí está el código
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="" content="">
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
.sub-inactive{display:none;}
.sub-active{display:!important;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(''.sub'').parent().hover(
function(){ $(''.sub'').removeClass(''sub-inactive'').addClass(''sub-active''); },
function(){ $(''.sub'').removeClass(''sub-active'').addClass(''sub-inactive''); },
);
});
</script>
</head>
<body>
<div id="container">
<ul class="main">
<li>link1</li>
<li>link2</li>
<li>link3
<ul class="sub sub-inactive">
<li>link 3a</li>
<li>link 3a</li>
<li>link 3a</li>
<li>link 3a</li>
</ul>
</li>
<li>link4</li>
<li>link5</li>
</ul>
</div>
</body>
</html>
Básicamente, hay múltiples clases asociadas a un elemento (sub-activo, sub-inactivo en este caso). Y en función de algún evento que ocurra en la página, quiero modificar dinámicamente el estado de la clase del elemento. es decir, por ejemplo si para un elemento, la clase que está presente ahora es class = "sub-sub-active", quiero cambiar usando jquery a class = "sub sub-INACTIVO" ....
Por favor, hágame saber cómo agregar / eliminar clases específicas de un elemento. Las dos líneas de código dadas a continuación (del ejemplo anterior) no parecen funcionar:
function(){ $(''.sub'').removeClass(''sub-inactive'').addClass(''sub-active''); },
function(){ $(''.sub'').removeClass(''sub-active'').addClass(''sub-inactive''); }
¡Gracias!
Creo que básicamente lo que estás buscando es algo como esto ...
<script type="text/javascript">
$(document).ready(function(){
$(''.sub'').parent().hover(function(){
$(this).find(''ul.sub'').removeClass(''sub-inactive'').addClass(''sub-active'');
});
$(''.sub'').parent().mouseout(function(){
$(this).find(''ul.sub'').removeClass(''sub-active'').addClass(''sub-inactive'');
});
});
Además, es posible que desee comprobar su CSS. No creo que la configuración de visualización:! Importante; en realidad hará cualquier cosa. De hecho, utilizando el ejemplo anterior, ni siquiera debería necesitar la clase sub-activa , porque la clase sub-inactiva se elimina del elemento, por lo tanto, se revoca el "display: none;" declaración.
Supongo que mi propio código (en la pregunta), aunque no es eficiente, realmente funciona. El problema era con una coma adicional al final de la función mouseleave dentro del evento hover -
function(){ $(''.sub'').removeClass(''sub-inactive'').addClass(''sub-active''); },
function(){ $(''.sub'').removeClass(''sub-active'').addClass(''sub-inactive''); },
la coma al final de la segunda línea de código anterior causó el error en JS, y todo el tiempo pensé que el problema estaba en la forma en que usé removeClass y addClass.
gracias por ayudar a todos, aprendí un poco de las dos respuestas anteriores.
Un simple cambio
$(document).ready(function(){
$(''.sub'').parent().hover(
function(){ $(''.sub'', this).removeClass(''sub-inactive'').addClass(''sub-active''); },
function(){ $(''.sub'', this).removeClass(''sub-active'').addClass(''sub-inactive''); },
);
});
Cuando usas toggleClass() , las cosas se vuelven aún más fáciles:
$(document).ready(function(){
$(''.sub'').parent().hover(function() {
$(''.sub'', this).toggleClass(''sub-inactive sub-active'');
});
});
De todos modos, no tiene demasiado sentido tener una clase extra para el estado inactivo. Simplemente estilo .sub con el aspecto inactivo (predeterminado) y .sub-active un .sub-active para los activos.
Esa es una clase menos de la que preocuparse y los elementos nunca pueden tener accidentalmente ambos estados al mismo tiempo.
use toggleClass() para agregar una clase si no está presente, o elimínela si está presente. porque la lógica es la misma, puede pasar una sola función para hover .
$(document).ready(function(){
var sub = $(''.sub'');
sub.parent().hover(function(){
sub.toggleClass(''sub-inactive sub-active'');
});
});
documentos aquí .
¡Espero que ayude! aclamaciones.