Como puedo reducir este código para que sea mas practico?


06 de Mayo del 2020

 

Buenas, saludos Programadores 
Hoy quiero pedir de su Conocimiento ayuda, una forma mas simple y practica de Realizar este Codigo.
Gracias

//* Codigo Divs *// $('#btnEnviar, #pregunta2,#pregunta3,#pregunta4,#pregunta5,#pregunta6,#pregunta7,#pregunta8, #pregunta9,#pregunta10').hide(); $("#regresar").on("click",mostrarAnterior); function mostrarAnterior(){ $(this).parent().toggle(); $('#pregunta1').show(); } $("#siguiente1").on("click",mostrarsiguiente); function mostrarsiguiente(){ $(this).parent().toggle(); $('#pregunta2').show(); } $("#siguiente2").on("click",mostrarsiguiente2); function mostrarsiguiente2(){ $(this).parent().toggle(); $('#pregunta3').show(); } $("#siguiente3").on("click",mostrarsiguiente3); function mostrarsiguiente3(){ $(this).parent().toggle(); $('#pregunta4').show(); } $("#siguiente4").on("click",mostrarsiguiente4); function mostrarsiguiente4(){ $(this).parent().toggle(); $('#pregunta5').show(); } $("#siguiente5").on("click",mostrarsiguiente5); function mostrarsiguiente5(){ $(this).parent().toggle(); $('#pregunta6').show(); } $("#siguiente6").on("click",mostrarsiguiente6); function mostrarsiguiente6(){ $(this).parent().toggle(); $('#pregunta7').show(); } $("#siguiente7").on("click",mostrarsiguiente7); function mostrarsiguiente7(){ $(this).parent().toggle(); $('#pregunta8').show(); } $("#siguiente8").on("click",mostrarsiguiente8); function mostrarsiguiente8(){ $(this).parent().toggle(); $('#pregunta9').show(); } $("#siguiente9").on("click",mostrarsiguiente9); function mostrarsiguiente9(){ $(this).parent().toggle(); $('#pregunta10').show(); $('#btnEnviar').show(); }

Bruno C.
12 de Agosto del 2026

Hola,

Tu código tiene 9 funciones casi idénticas, cada una solo cambia el número de la siguiente pregunta que muestra. Como la secuencia es lineal (pregunta 1, luego 2, luego 3...), puedes sustituir todo eso por una única función que lleve la cuenta con un contador:

$('#btnEnviar, #pregunta2, #pregunta3, #pregunta4, #pregunta5, #pregunta6, #pregunta7, #pregunta8, #pregunta9, #pregunta10').hide();

var preguntaActual = 1;

$('.btn-siguiente').on('click', function () {
    $(this).parent().toggle();
    preguntaActual++;
    $('#pregunta' + preguntaActual).show();

    if (preguntaActual === 10) {
        $('#btnEnviar').show();
    }
});

$('#regresar').on('click', function () {
    $(this).parent().toggle();
    $('#pregunta1').show();
});

Para que esto funcione solo tienes que añadir la clase btn-siguiente a los 9 botones #siguiente1 al #siguiente9 en tu HTML, en vez de darles un id distinto a cada uno para engancharles un onclick propio. El truco está en que ya no necesitas saber «qué botón concreto» se ha pulsado, solo cuántas veces se ha pulsado ya alguno de ellos, y eso te lo da el contador preguntaActual.

Si en el futuro las preguntas dejan de ser una secuencia estrictamente lineal (por ejemplo, saltar de la 3 a la 6 según la respuesta), este patrón de contador se queda corto y ahí sí te convendría pasar a guardar la «siguiente pregunta» en un atributo data-next de cada botón, pero para un flujo lineal como el tuyo esto es lo más simple que vas a conseguir.

Un saludo,
Bruno C.