Bienvenidos a Trocitos de programación


Bienvenidos a Trocitos de programación (En construcción)
Creo este blog para hacer como un pequeño repositorio de pequeños scripts o trocitos de código que he utilizado en algún momento y pueden ser útiles para otras personas o para mi mismo en algún momento.
Aclarar que no soy ningún experto en la materia ni mucho menos y que tampoco no todos los códigos estarán hechos por mi en su totalidad sino que igual en su momento busque una solución y encontre la solución completa o parcial.
(por esto pido comprensión si alguna vez alguien ve algun trocito que él mismo puso en algun foro ya que no puedo tener las fuentes de todas las cosas que he sacado de internet, si se diera el caso, el propietario que deje un comentario publicando su desaprobación de que yo publique ese contenido junto con un enlace al lugar en el que él lo publico, y mis más sinceras disculpas).

domingo, 28 de octubre de 2012

Ocultar y mostrar div con JQuery

Con este trocito de código podemos ocultar o mostrar un div u otro dependiendo el valor seleccionado en un select option de HTML (usando JQuery, para ver esto usando solo javascript visita esta entrada )
Ejemplo:
Nuestro numero de cuenta es: 000000000000000000000

Codigo HTML:

<div>
      <div>
           <SELECT NAME="pago" onChange="pagoOnChange(this)">
              <OPTION VALUE="transferencia">Transferéncia</OPTION>
              <OPTION VALUE="tarjeta">Pago con tarjeta</OPTION> 
           </SELECT>
      </div>
      <div id="nCuenta" style="display:none;">
           Nuestro numero de cuenta es: 000000000000000000000
      </div>
      <div id="nTargeta" style="display:;">
           <br>
           Numero*
           <br>
           <input type='text' name='nTarjeta'size='20' maxLength='60'>
           <br><br>
           Titular*
           <br>
           <input type='text' name='titularTarjeta'size='20' maxLength='60'>
           <br><br>
           Numero de seguridad*
           <input type='text' name='numeroSeguridad'size='3' maxLength='3'>
      </div>
</div>
Codigo Javascript:

function pagoOnChange(sel) {
      if (sel.value=="transferencia"){
           $("#nCuenta").show();
           $("#nTargeta").hide();

      }else{

           $("#nCuenta").hide();
           $("#nTargeta").show();

      }
}
Bueno ahí lo dejo, seguro que hay alguna forma mejor o más optima pero yo lo resolví así, si alguien quiere poner un comentario explicando una forma mejor que no se vea cohibido puesto que la función de este blog es ayudar y mejorar en la medida de lo posible.

Un saludo.

10 comentarios :

  1. Hola Sergio, este código me ha ayudado mucho.
    He estado haciendo algo parecido, para hacer aparecer/desaparecer varios div.
    La cuestión es que tengo varios div con la id=nCuenta
    y otros tantos con la id=nTargeta
    (lo pongo de esta manera para adaptarlo al ejemplo)

    pero cuando elijo alguno de los dos casos, sólo me desaparece el primer div del objeto que tiene que ocultarse.

    Quiero que se oculten todos los objetos que contentan el mismo id. ¿Cómo puedo conseguirlo?

    Gracias por tu ayuda.

    ResponderEliminar
    Respuestas
    1. No se si te he entendido bién, pero para empezar, te recomendaria que no repitieras id, si necesitas referirte a varios elementos iguales o parecidos hazlo asignandole un atributo class (y no tiene porque estar ligado con ninguna clase css).
      Luego, si lo he entendido bién y lo que quieres es ocultar varios div de golpe y mostrar tambien varios de golpe, una de dos:

      - Metes todos los id=ncuenta (deberian pasar a class='cuenta') en un div contenedor:
      <div id='contenedorCuentas' >
      <div class='cuentas' id='nCuenta_1'></div>
      <div class='cuentas' id='nCuenta_2'></div>
      </div>

      <div id='contenedorTargeta' >
      <div class='targetas' id='nTargeta_1'></div>
      <div class='targetas' id='nTargeta_2'></div>
      </div>

      Y al cambiar el select Muestras y ocultas directamente el contenedor(ocultando así también el contenidoi).


      - O bién la otra opción es ocultarlos con un each()
      <div class='targetas' id='nTargeta_1'></div>
      <div class='cuentas' id='nCuenta_1'></div>
      <div class='targetas' id='nTargeta_2'></div>
      <div class='cuentas' id='nCuenta_2'></div>

      (Script)
      if (sel.value=="transferencia"){
      $(".cuentas").each(function(index, elem){
      $(elem).show();
      });
      $(".targetas").each(function(index, elem){
      $(elem).hide();
      });
      }else{

      $(".cuentas").each(function(index, elem){
      $(elem).hide();
      });
      $(".targetas").each(function(index, elem){
      $(elem).show();
      });

      }


      Y si no te he entendido bién pega un un trocito de tu codigo a ver si nos entendemos mejor

      Eliminar
  2. Eres un fenómeno.
    Lo he hecho por la segunda forma y me ha funcionado a la perfección.
    Es para una selección de artículos en una galería. Cada tipo de artículo asociado con un class.
    Estoy iniciándome en Java, pero sé cosas muy básicas aún.
    Con lo del id y el class, error grave, se me ha ido la olla....
    Gracias por tu ayuda. Un saludo.

    ResponderEliminar
  3. Tengo un problema , cunado trabajo dcon 3 select no me muestra la tercera opcion se repite siempre la segunta, es decir quiero trabajar enmi select con 3 options, gracias!

    ResponderEliminar
  4. Se pude hacer lo mismo ocupando el selectOneMenu en jsf

    ResponderEliminar
  5. sergio hermano muy agradecido por tu ayuda; pero tengo un problema

    ResponderEliminar
  6. sergio hermano muy agradecido por tu ayuda; pero tengo un problema

    ResponderEliminar
  7. Muy buen codigo, simple y facil de entender!!
    Muchas gracias por la ayuda (Y)

    ResponderEliminar
  8. 2021 JUNIO SI SIRVE...

    Gracias brow si me funciono

    ResponderEliminar