3

Tengo el siguiente código:

   <div class="container" style="text-align:center;">
        <h1 class="text-center">Calculate Areas!</h1>
        <div class="init">
            <select name="area" class="form-control">
                <option value="cuadrado">Cuadrado</option>
                <option value="rectangulo">Rectángulo</option>
                <option value="circulo">Circulo</option>
                <option value="triangulo">Triángulo</option>
            </select>
            <button type="button" class="form-control btn btn-primary">Move it!</button>
        </div>
        <div class="meth1" style="display:none;">
            <h3>Area de un cuadrado</h3>
            <input class="form-control" type="number" id="m1">
            <button type="button">Calcular</button>
        </div>
        <div class="meth2" style="display:none;">
            <h3>Area de un rectángulo</h3>
            <input class="form-control" type="number" id="m2">
            <input class="form-control" type="number" id="m2">
            <button type="button">Calcular</button>
        </div>
        <div class="meth3" style="display:none;">
            <h3>Area de un círculo</h3>
            <input class="form-control" type="number" id="m3">
            <button type="button">Calcular</button>
        </div>
        <div class="meth4" style="display:none;">
            <h3>Area de un triángulo</h3>
            <input class="form-control" type="number" id="m4">
            <input class="form-control" type="number" id="m4">
            <button type="button">Calcular</button>
        </div>
    </div>

Lo que quiero es que los div (meth1, meth2, meth3 y meth4) aparezcan dinámicamente DEPENDIENDO de la selección hecha con el SELECT que se ve en el div (init), pero lo que quiero es que mientras no se haya seleccionado nada en el SELECT, el código no pueda ser visible o "aún no se haya formado".

Lo puedo dejar con el CSS inline de display:none; o display:block; pero cualquiera puede cambiar la visibilidad fácilmente, y además la carga de la página es mayor debido a que carga todos los cuatro div.

¿Es posible crear el código directamente desde jQuery? Para que sólo se muestre el div meth1 si en el SELECT está "Cuadrado", se muestre meth2 si en el SELECT está "Rectangulo", y así sucesivamente. He leído algo así sobre createElement pero no sé.

8
  • 2
    No es claro cual es tu problema. Lograr cambiar la visibilidad de los div con el select es facil con jquery. Pero tus requisitos adicionales (" la carga de la página es mayor debido a que carga todos los cuatro div") no me parecen razonables (early optimization...). Tampoco entiendo lo de "cualquiera puede cambiar la visibilidad fácilmente". A que te refieres?
    – leonbloy
    Commented el 15 ago. 2016 a las 1:06
  • 1
    Y qué importa que sea "editable por cualquier usuario"? El codigo HTML siempre es editable, lo mismo que el código Javascript. No entiendo de qué escenario te estás queriendo proteger.
    – leonbloy
    Commented el 15 ago. 2016 a las 1:23
  • 4
    La verdad no comprendo por qué esta pregunta tiene un -3.
    – Alvaro Montoro
    Commented el 15 ago. 2016 a las 10:58
  • 1
    Cierto. Concuerdo contigo @AlvaroMontoro, por lo que ya le di mi voto a favor. Commented el 15 ago. 2016 a las 12:36
  • 1
    +1 ! esta pregunta no debería tener votos negativos.
    – Alan
    Commented el 22 sept. 2016 a las 19:45

1 respuesta 1

6

Si tu preocupación es que el usuario no vea el contenido de los div antes de seleccionar nada en el select, entonces no sólo no te recomendaría que los tengas con display:none y luego lo cambies a display:block (algo que tú mismo indicas que no quieres), sino que tampoco te recomendaría lo que has buscado de crear los elementos dinámicamente con JavaScript/jQuery con createElement.

El motivo es similar: implicaría que el contenido está disponible en alguna parte en los ficheros JS y el usuario también podría verlo buscando un poco. Podrías ofuscarlo para que sea más difícil de encontrar/leer, pero seguiría estando disponible dentro de los archivos descargados y enlazados por la página.

Para lo que quieres, casi te recomendaría que usases AJAX (directamente con la función $.ajax o con get o load). La idea sería poner los contenidos de todos los divs (meth1, meth2, meth3 y meth4) en fichero separados (p.e. meth1.html, meth2.html, meth3.html y meth4.html) y eliminar los div (dejar sólo uno vacío):

<div class="container" style="text-align:center;">
    <h1 class="text-center">Calculate Areas!</h1>
    <div class="init">
        <select name="area" class="form-control">
            <option value="cuadrado">Cuadrado</option>
            <option value="rectangulo">Rectángulo</option>
            <option value="circulo">Circulo</option>
            <option value="triangulo">Triángulo</option>
        </select>
        <button type="button" class="form-control btn btn-primary">Move it!</button>
    </div>
    <div id="meth"></div>
</div>

Y entonces añadir un controlador del evento change para el select que leerá el contenido del fichero apropiado y lo cargará en el nuevo div que creaste. Por ejemplo algo como esto (ojo, no lo he probado y puede contener fallos):

$("select[name=area]").on("change", function() { 
    var url = "";

    // decidimos la url a cargar dependiendo del valor del select
    switch ($(this).val()) {
        case "cuadrado":   url = "meth1.html"; break;
        case "rectangulo": url = "meth2.html"; break;
        case "circulo":    url = "meth3.html"; break;
        case "triangulo":  url = "meth4.html"; break;
    }

    // cargamos la url en el div
    $("#meth").load(url);
});
1
  • 1
    Alvaro siempre me salva, Jajaja gracias hombre, había pensado también en el AJAX pero creí que habría alguna otra forma, y pues lo de ofuscar suena bien aunque necesito aprender mucho más de JS, voy a intentar cambiar al load, haber qué sucede. Y en cuanto a los votos negativos... La verdad, no tengo ni la menor idea de quien quiera joder mi puntaje ¬¬ Commented el 15 ago. 2016 a las 13:21

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.