Foros del Web » Programando para Internet » Jquery »

[SOLUCIONADO] Guardar valor del anterior clic

Estas en el tema de Guardar valor del anterior clic en el foro de Jquery en Foros del Web. Buenas, antes de todo dar las gracias por el tiempo. Llevo bastante tiempo peleándome y no me sale ni a la de 3. Tengo varios ...
  #1 (permalink)  
Antiguo 14/05/2020, 15:56
 
Fecha de Ingreso: marzo-2012
Mensajes: 179
Antigüedad: 8 años, 2 meses
Puntos: 2
Guardar valor del anterior clic

Buenas,

antes de todo dar las gracias por el tiempo.

Llevo bastante tiempo peleándome y no me sale ni a la de 3.

Tengo varios section y cada uno tiene un id diferente y cuando haces clic lo muestro.

El problema me encuentro que me gustaría esconder el section anterior, es decir. La primera vez muestro el section1 y cuando apretó en otro elemento del menu y me gustaría esconder el section1 y mostrar el section4 por ejemplo.

Código Javascript:
Ver original
  1. $(".menucat").click(function() {
  2.             var id = this.id;
  3.             $('.active').removeClass('active');
  4.             $( this ).addClass( 'active' );
  5.             $('#sec'+id).show();
  6.     })
  #2 (permalink)  
Antiguo 14/05/2020, 16:30
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.690
Antigüedad: 12 años, 3 meses
Puntos: 1117
Respuesta: Guardar valor del anterior clic

Justo lo acabo de hacer para un sitio hace unos dias, espero te sirva de ayuda

Código HTML:
Ver original
  1. <button class="btns" data-id="s1">Link 1</button>
  2. <button class="btns" data-id="s2">Link 2</button>
  3. <button class="btns" data-id="s3">Link 3</button>
  4.  
  5. <main>
  6.   <section id="s1" class="active">Seccion 1</section>
  7.   <section id="s2">Seccion 2</section>
  8.   <section id="s3">Seccion 3</section>
  9. </main>

Código Javascript:
Ver original
  1. const btns = document.querySelectorAll('.btns');
  2.  
  3. btns.forEach(element => {
  4.   element.addEventListener('click', ({ currentTarget }) => {
  5.     const id = currentTarget.getAttribute('data-id');
  6.     document.querySelector('main .active').classList.remove('active');
  7.     document.getElementById(id).classList.add('active');
  8.   });
  9. });

Código CSS:
Ver original
  1. section
  2.   display: none
  3.   &.active
  4.     display: block
  #3 (permalink)  
Antiguo 16/05/2020, 05:32
 
Fecha de Ingreso: marzo-2012
Mensajes: 179
Antigüedad: 8 años, 2 meses
Puntos: 2
Respuesta: Guardar valor del anterior clic

Funciono perfecto, muchas gracias!
  #4 (permalink)  
Antiguo 17/05/2020, 04:36
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.437
Antigüedad: 8 años, 6 meses
Puntos: 935
Respuesta: Guardar valor del anterior clic

Otra solución con solo métodos de jQuery:

Código HTML:
Ver original
  1. <button>Botón 1</button>
  2. <button>Botón 2</button>
  3. <button>Botón 3</button>
  4.  
  5. <section>Sección 1</section>
  6. <section>Sección 2</section>
  7. <section>Sección 3</section>

Código Javascript:
Ver original
  1. $("section").hide();
  2.  
  3. $("button").on("click", function(){
  4.   let elem = $("section").eq($("button").index(this));  
  5.   $(".show").removeClass("show").addClass("hide").hide();  
  6.   elem.removeClass("hide").addClass("show").show();
  7. });

Se ocultan las secciones al inicio. Luego, cada vez que se pulse un botón, se tomará a la sección equivalente al botón pulsado (si se pulsó el primer botón, se toma a la primera sección). Si existe algún elemento con la clase show, se le quitará dicha clase, se le asignará la clase hide y se la ocultará. Finalmente, se le retirará la clase hide (si es que la tuviera, que es lo que sucederá luego de los primeros clics) al elemento seleccionado, se le asignará la clase show y se la mostrará.

DEMO

__________________
«Laissez faire et laissez passer, le monde va de lui même»



La zona horaria es GMT -6. Ahora son las 12:46.