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: 9 años, 3 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.774
Antigüedad: 13 años, 3 meses
Puntos: 1145
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: 9 años, 3 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.512
Antigüedad: 9 años, 7 meses
Puntos: 957
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

__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand

Etiquetas: clic, valor
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:11.