JQuery - Dudas con divs

 
Vista:

Dudas con divs

Publicado por Pablo (6 intervenciones) el 04/08/2020 11:44:16
Estimados,

Tengo una duda, porque el problema en realidad lo he resuelto.

Se trata de un formulario de contacto, del que pido solo el email.

Al pulsar enviar, abro el resto del formulario y ya solicito algunos datos más como el nombre y los apellidos, el móvil, etc.

Para ocultar los campos que no son email, al cargar el documento oculto dos div's dónde tengo los campos: dark1 y dark2

El caso es que si a las divs que quiero ocultar las llamo igual (dark, por ejemplo), solo me oculta una, la otra no.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
 
    <title>Efectos de formulario</title>
 
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-1"></div>
        <div class="col-10">
          <form class="myform" action="index.html" method="post">
            <div class="dark" id="dark1">
              <div class="form-group">
                <label for="nombre">Nombre</label>
                <input type="text" name="nombre" id="nombre" class="form-control" value="" required>
              </div>
              <div class="form-group">
                <label for="apellidos">Apellicos</label>
                <input type="text" name="apellidos" id="apellidos" class="form-control" value="" required>
              </div>
            </div>
            <div class="light" id="light">
              <div class="form-group">
                <label for="email">Email</label>
                <input type="email" name="email" id="email" class="form-control" value="" required>
              </div>
              <div class="form-group">
                <button type="button" name="button1" id="button1" class="btn btn-primary">Entrar</button>
              </div>
            </div>
            <div class="dark" id="dark2">
              <div class="form-group">
                <label for="movil">Teléfono Móvil</label>
                <input type="text" name="movil" id="movil" class="form-control" value="" required>
              </div>
              <div class="form-group">
                <label for="compañia">Compañia</label>
                <input type="text" name="compañia" id="compañia" class="form-control" style="text-transform:uppercase;" value="">
              </div>
              <div class="form-group">
                <label for="ciudad">Ciudad</label>
                <input type="text" name="ciudad" id="ciudad" class="form-control" value="">
              </div>
              <div class="form-group">
                <label for="provincia">Provincia</label>
                <input type="text" name="provincia" id="provincia" class="form-control" value="">
              </div>
              <div class="form-group">
                <button type="submit" name="button2" id="button2" class="btn btn-success">Enviar datos!</button>
                <button type="reset" name="button3" id="button3" class="btn btn-danger">Limpiar formulario</button>
 
              </div>
            </div>
 
 
          </form>
 
        </div>
        <div class="col-1"></div>
      </div>
    </div>
 
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"
    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
    crossorigin="anonymous"></script>
	<script>
    let doc = $(document).ready(inicializarFormulario);
    function inicializarFormulario(){
      let campos1 = $("#dark1").hide();
      let campos2 = $("#dark2").hide();
	  let boton = $("#button1").click(pulsarBoton1);
    }
    function pulsarBoton1(){
	$campoEmail = $("#email").val();
	if($campoEmail.length <= 0 ){
		//No hagas nada.
	}else{
		let campos1 = $("#dark1").show();
		let campos2 = $("#dark2").show();
		let boton = $("#button1").hide();
	}
    }
    </script>
	<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  </body>
</html>

Mi pregunta es, ¿Existe alguna forma de llamar a todas las div's que quiera que ejecuten las mismas acciones de la misma manera?

Ahora solo son dos, pero si necesitara hacerlo con más divs, tendría que hacer dos líneas de código por cada una, y el mantenimiento se podría complicar.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Lopez
Val: 3
Ha aumentado su posición en 9 puestos en JQuery (en relación al último mes)
Gráfica de JQuery

Dudas con divs

Publicado por Lopez (1 intervención) el 08/08/2020 16:58:26
Hola Pablo,
Imagino puede ser con el uso de toggle y asignando un atributo como elemento selector.
Puede ser una clase por ejemplo, o un data-*.
Saludos!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar