2

me gustaría que me enseñaran como simplificar varios else if que tienen la misma función pero con diferentes variables, específicamente lo que quiero es abrir un solo modal que tiene un contenido según el botón que yo haya clikeado, he visto que hy casos en el que usan el bucle for pero no encuentro uno parecido al mio, si es necesariousarlome gustaria que dieran una asesoría.

var contenido1 = "contenido 1";
var contenido2 = "contenido 2";
var contenido3 = "contenido 3";

var modal = document.querySelector('#modal');

function abrir() {
  modal.style.display = 'block';
};

var contenido = document.querySelector('p');
       /* de aquí para abajo es lo que quierosimplificar */
function caja(cont) {
    if(cont =="cont1") {
    contenido.innerHTML = contenido1; /*<esto imprime el contenido*/
        abrir();     /* < esto abre el modal */
    }
    else if(cont =="cont2") {                //
        contenido.innerHTML = contenido2;    // lo redundante
        abrir();                           //
    }                                     //
    else if(cont =="cont3") {            //
        contenido.innerHTML = contenido3;//
        abrir();                       //
    }
    else {};
}; 

    /* esto no */

var modalOut = document.querySelector('#modal');

modalOut.addEventListener('click', function() {
  modal.style.display = 'none';
});

gracias.

3 respuestas 3

5

Lo más optimizable sería algo así:

var contenidos = {};
contenidos.cont1 = "contenido 1";
contenidos.cont2 = "contenido 2";
contenidos.cont3 = "contenido 3";

var contenido = document.getElementById('contenido')
function caja(cont) {
        contenido.innerHTML = (cont in contenidos) ? contenidos[cont] : "Contenido by default" 
        abrir();     
}
function abrir(){
}
<div onclick='caja("cont1")'>caja 1 </div>
<div onclick='caja("contasd1")'> caja invalida </div>
<div id='contenido'></div>

EDIT: Agregué una manera de manejar errores. Si el valor de cont no existe en el array contendidos, entonces se asigna un valor por defecto al innerHTML. También puedes decidir no asignar nada y ni siquiera llamar a abrir, depende de lo que quieras hacer con tu aplicación.

switch es solo un poquito más prolijo que if...else, pero básicamente es lo mismo.

7
  • 1
    Sólo le falta un control de errores y sería perfecta tu respuesta. Me reservo el +1 por ese motivo.
    – A. Cedano
    Commented el 2 jul. 2020 a las 21:08
  • Si creo que en el caso de lo que les dí resume mucho, pero como hago si en vez de imprimir con innerHTML quiero que llame clases que ya imprimen contenido según el lugar donde van, para ser mas especifico les voy a dejar el código original para entender mejor.
    – Offtopic
    Commented el 7 jul. 2020 a las 1:17
  • Mas bien, para no complicarles con código tras código los invito a pasar por otra pregunta que formulé donde tengo todo el codigo de mi proyecto y ahí pueden ver la clase que he creado con varios criterios y funciones y tambien funciona la vista previa, probé lo de Alex pero no sé como podría llamar los contenidos dentro de la función caja.
    – Offtopic
    Commented el 7 jul. 2020 a las 1:29
  • es.stackoverflow.com/questions/366782/…
    – Offtopic
    Commented el 7 jul. 2020 a las 1:31
  • A. Cedano te agradecería mucho si me ayudaras a terminar el código con un control de errores, veo que el de Alex abre es el ultimo contenido, creo que es porque selecciona todos.
    – Offtopic
    Commented el 7 jul. 2020 a las 12:21
0

Puedes usar la declaración switch

function caja(cont){
    switch(cont){
        case "cont1":
            contenido.innerHTML = contenido1; 
            break;
        case "cont2":  
            contenido.innerHTML = contenido2;    
            break;
        case "cont3":     
            contenido.innerHTML = contenido3;    
            break;
        default:
            console.log("default");
    }
    abrir();      
}

Agregando otra opción seria definir una variable que contenga los contenidos por tipo:

const contenidoPorTipo = {
    cont1: contenido1,
    cont2: contenido2,
    cont3: contenido3;
}

function caja(cont){
    contenido.innerHTML = contenidoPorTipo[cont];
    abrir();
}
0
-1

Una variacion de esta respuesta, define tus datos en un objeto, luego en tu funcion verifica que exista la llave para mostrarlo o devolver vacio

const data = {

  cont1 : 'contenido 1',
  cont2 : 'contenido 2',
  cont3 : 'contenido 3',
}

const $contenido = document.getElementById('contenido')

function caja(cont) {
  $contenido.innerHTML =  data[cont] || 'vacio';
   
}
<div class='caja' onclick='window.caja("cont1")'>caja 1</div>
<div class='caja' onclick='caja("cont2")'>caja 2</div>
<div class='caja' onclick='caja("cont3")'>caja 3</div>
<div class='caja' onclick='caja("asdasdasdcadfsasdf")'>caja vacia</div>
<br/>
<div id='contenido'></div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.