Foros del Web » Programando para Internet » Jquery »

[SOLUCIONADO] Cambiar class por otra

Estas en el tema de Cambiar class por otra en el foro de Jquery en Foros del Web. Buenas a todos, primero de todo dar las gracias. Tengo un menu en arbol que cuando un nivel tiene subniveles muestra delante el simbolo + ...
  #1 (permalink)  
Antiguo 23/02/2018, 08:57
 
Fecha de Ingreso: marzo-2012
Mensajes: 180
Antigüedad: 12 años, 1 mes
Puntos: 2
Cambiar class por otra

Buenas a todos,

primero de todo dar las gracias.

Tengo un menu en arbol que cuando un nivel tiene subniveles muestra delante el simbolo + con la classe fa fa-plus-square-o lo que me gustaria que al hacer clic en un nivel con subniveles al desplegar y mostrar los niveles inferiores cambiara el fa fa-plus-square-o por fa fa-minus-square-o. Llevo un buen rato intentado y no lo consigo.

Código Javascript:
Ver original
  1. <script type="text/javascript">
  2.         $(document).ready(function() {              
  3.             $("#accordion div").click(function() {
  4.                 if (false == $(this).next().is(':visible')) {
  5.                     $('#accordion2 ul').slideUp(300);
  6.                     $('a.activo').removeClass('activo');
  7.                     $(this).children('a').addClass('activo');
  8.                 }
  9.                 $(this).next().slideToggle(300);
  10.                 $('a.activo').removeClass('activo');
  11.                 $(this).children('a').addClass('activo');
  12.             });
  13.             $('#accordion2 ul:eq(0)').show();
  14.         });
  15.     </script>

HTML
Código HTML:
<ul id="accordion">
    <li class="pdlf-15">
        <div><i class="fa fa-plus-square-o" aria-hidden="true"></i> <i class="fa fa-folder fa-lg" aria-hidden="true"></i> <a href="#" class="">Nivel 1</a></div>
        <ul style="display: block;">
            <li class="pdlf-15">
                <div><i class="fa fa-plus-square-o" aria-hidden="true"></i> <i class="fa fa-folder fa-lg" aria-hidden="true"></i> <a href="#" class="activo">Nivel 2</a></div>
                <ul style="display: block;">
                    <li class="pdlf-15"><i class="fa fa-file fa-lg" aria-hidden="true"></i> <a class="enllac" disabled="disabled" href="#">Nivel 3</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul> 
  #2 (permalink)  
Antiguo 26/02/2018, 03:37
Avatar de Fuzzylog  
Fecha de Ingreso: agosto-2008
Ubicación: En internet
Mensajes: 2.511
Antigüedad: 15 años, 7 meses
Puntos: 188
Respuesta: Cambiar class por otra

haces una busqueda jquery de los elementos con .fa-plus-square-o

$(".fa-plus-square-o")

Recorres esta lista de elementos con un each (internalmente el operador this hará referencia a cada elemento) y le haces un removeClass("fa-plus-square-o") y un addClass("fa-minus-square-o").

un saludo
__________________
if (fuzzy && smooth) {
fuzzylog = "c00l";
return true;
}
  #3 (permalink)  
Antiguo 26/02/2018, 05:54
 
Fecha de Ingreso: marzo-2012
Mensajes: 180
Antigüedad: 12 años, 1 mes
Puntos: 2
Respuesta: Cambiar class por otra

Gracias por la ayuda, añadi este codigo a la funcion click y salio bien.

Código Javascript:
Ver original
  1. $(this).find('i').removeClass('fa fa-plus-square-o');
  2. $(this).find('i').addClass('fa fa-minus-square-o');
  #4 (permalink)  
Antiguo 26/02/2018, 09:02
Avatar de Fuzzylog  
Fecha de Ingreso: agosto-2008
Ubicación: En internet
Mensajes: 2.511
Antigüedad: 15 años, 7 meses
Puntos: 188
Respuesta: Cambiar class por otra

eso funcionará siempre y cuando todos los <i> tengan esa clase.
__________________
if (fuzzy && smooth) {
fuzzylog = "c00l";
return true;
}

Etiquetas: class
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:44.