Pregunta:

Fecha: 25-02-2017 04:52:20 (En Español)

¿Cómo hacer un Switch Case con JQuery para este código?[Resuelta]

Saludos, ando aprendiendo Jquery y llegue a una parte del código donde quiero simplificar con switch case. He intentado pero me sale erróneo entonces enseñare el código que quiero simplificar:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Formularios I</title>
<style>

body{
 background-color:#FFC;
}

#principal{

 padding:10px 10px 10px 50px;
 background-color:#F93; 
 box-shadow: 10px 10px 5px 0px #999999;
 border-radius: 10px;
 }

 td{
 padding-bottom:25px;
 }
 h1{
 text-align:center;
 }
 /*oculta los campos de texto*/
 #tarjeta, #fecha_tarjeta, #email, #n_tarjeta, #f_tarjeta, #e_mail{

 visibility: hidden;
 }
 </style>
 <script src="../Jquery/jquery-3.1.1.min.js"></script>

 <script>

 $(document).ready(function() {

este es el codigo que quiero simplificar con switch case

$("#visa").click(function(){

  $("#tarjeta").css("visibility", "visible");
  $("#n_tarjeta").css("visibility", "visible");

  $("#fecha_tarjeta").css("visibility", "visible");
  $("#f_tarjeta").css("visibility", "visible");

  $("#email").css("visibility", "hidden");
  $("#e_email").css("visibility", "hidden");

  $("#tarjeta").focus();

});

$("#master").click(function(){

  $("#tarjeta").css("visibility", "visible");
  $("#n_tarjeta").css("visibility", "visible");

  $("#fecha_tarjeta").css("visibility", "visible");
  $("#f_tarjeta").css("visibility", "visible");

  $("#email").css("visibility", "hidden");
  $("#e_email").css("visibility", "hidden");

  $("#tarjeta").focus();

});


$("#paypal").click(function(){

  $("#tarjeta").css("visibility", "hidden");
  $("#n_tarjeta").css("visibility", "hidden");

  $("#fecha_tarjeta").css("visibility", "hidden");
  $("#f_tarjeta").css("visibility", "hidden");

  $("#email").css("visibility", "visible");
  $("#e_email").css("visibility", "visible");

  $("#email").focus();

});

fin del codigo

//cuando el usuario escoge paypal
$("#paypal").click(function(){


//habilita el campo de email y lo enfoca al campo
$("#email").attr("disabled", false).focus().css("background-      color","#FFFFFF");

$("#tarjeta").attr("disabled", true).css("background-color","#f93");
$("#fecha_tarjeta").attr("disabled", true).css("background-color","#f93");

});

$("#visa").click(function(){

$("#tarjeta").attr("disabled", false).focus().css("background-color","#FFFFFF");
  $("#fecha_tarjeta").attr("disabled", false).css("background-color","#fff");

$("#email").attr("disabled", true).css("background-color","#f93");

});

$("#master").click(function(){

$("#tarjeta").attr("disabled", false).focus().css("background-color","#FFFFFF");
  $("#fecha_tarjeta").attr("disabled", false).css("background-color","#FFFFFF");

$("#email").attr("disabled", true).css("background-color","#f93");

});

});
</script>
</head>

<body>
<h1>Envío de datos</h1>
<div id="contenedor">
<form id="form_datos">
<table width="25%" border="0" align="center" id="principal">
<tr>
<td>Nombre:</td>
<td><label for="nombre"></label>
<input type="text" name="nombre" id="nombre" value="Obligatorio nombre">    </td>
</tr>
<tr>
        <td>Dirección:</td>
        <td><input type="text" name="direccion" id="direccion"></td>
      </tr>
      <tr>
        <td>Ciudad:</td>
        <td><input type="text" name="ciudad" id="ciudad"></td>
      </tr>
      <tr>
        <td>Código Postal</td>
        <td><label for="c_postal"></label>
          <input type="text" name="c_postal" id="c_postal"></td>
        </tr>
        <tr>
          <td>Método pago:</td>
          <td><p>
            <input type="radio" name="radio" id="paypal" value="paypal">
            <label for="paypal">PayPal</label>
          </p>
          <p>
            <input type="radio" name="radio" id="master" value="master">
            <label for="master">MasterCard</label>          
          </p>
          <p>
            <input type="radio" name="radio" id="visa" value="visa">
            <label for="visa">Visa</label>
            <br>
          </p></td>
        </tr>


        <tr>
          <td>Datos pago</td>
          <td><table width="200">
            <tr>
              <td><label for="tarjeta" id="n_tarjeta">Nº tarjeta</label></td>
              <td>
                <input type="text" name="tarjeta" id="tarjeta" disabled></td>
              </tr>
              <tr>
                <td align="left"><label for="fecha_tarjeta" id="f_tarjeta" >Fecha Expiración</label></td>
                <td>
                  <input type="text" name="fecha_tarjeta" id="fecha_tarjeta"  disabled ></td>
                </tr>
                <tr>
                  <td><label for="email" id="e_mail">Email</label></td>
                  <td>
                    <input type="text" name="email" id="email"  disabled  ></td>
                  </tr>


                </table></td>
              </tr>
              <tr>
                <td><p>País:</p></td>
                <td><p>
                  <label for="pais"></label>
                  <select name="pais" id="pais">
                    <option>España</option>
                    <option>México</option>
                    <option>Colombia</option>
                    <option>Perú</option>
                    <option>Chile</option>
                    <option>Argentina</option>
                  </select>
                </td>
              </tr>
              <tr>
                <td colspan="2" align="center"><input type="submit" value="Enviar" id="comprobar"></td>

              </tr>
            </table>
          </form>
        </div>

        <div id="las_aficiones"></div>
      </body>
      </html>

Se les agradecería una pronta respuesta.

Etiquetas: Javascript - JQuery - Pregunta Votos: 1 - Respuestas: 3 - Vistas: 12 Compartir en: Google Facebook Twitter LinkedIn Link

Respuestas:

Chrismart Anji Karma: 1473

Fecha: 26-02-2017 03:00:37 hmm...m se me hace un poco complicado de entender lo que quieres hacer ya que hay mucho codigo pero veamos tu quieres hacer algo como esto?

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<input type="radio" name="radio" id="paypal" value="paypal">
            <label for="paypal">PayPal</label>
          </p>
          <p>
            <input type="radio" name="radio" id="master" value="master">
            <label for="master">MasterCard</label>          
          </p>
          <p>
 <input type="radio" name="radio" id="visa" value="visa">
 <label for="visa">Visa</label>
 <script src="/js/jquery-3.1.1.min.js"></script>
 <script>
$(document).ready(function() {
var inputs = $('input[type=radio]');
$.each(inputs, function(indice,val){
$(val).change(function() {
     switch(indice) {
      case 0:
       // aqui pones todo lo que va hacer si selecciona el input radio con indice  0 con id='paypal'
$("#email").attr("disabled", false).focus().css("background-color","#FFFFFF");
$("#tarjeta").attr("disabled", true).css("background-color","#f93");
$("#fecha_tarjeta").attr("disabled", true).css("background-color","#f93");
      break;
      case 1:
      // aqui pones todo lo que va hacer si selecciona el input radio indice 1 con id='master'
$("#tarjeta").attr("disabled", false).focus().css("background-color","#FFFFFF");
  $("#fecha_tarjeta").attr("disabled", false).css("background-color","#FFFFFF");
$("#email").attr("disabled", true).css("background-color","#f93");
      break;
      case 2:
      // aqui pones todo lo que va hacer si selecciona el input radio indice 2 con id='visa'
$("#tarjeta").attr("disabled", false).focus().css("background-color","#FFFFFF");
  $("#fecha_tarjeta").attr("disabled", false).css("background-color","#fff");
$("#email").attr("disabled", true).css("background-color","#f93");
      break;
     }
});
});
});
</script>
</body>
</html>

asi de simple es ahora en todo caso que no te guste el evento change igual puedes poner click uwu da exactamente el mismo resultado n.n/ saludos;

Espero le haiga servido :)/

Pd: Agradecer con un like y poner la respuesta como resuelta no cuesta nada ouo Votos: 2 - Link respuesta

1

Anonimo Anonimo Karma: -4
Fecha: 26-02-2017 11:25:17
Buenas tardes, para tu respuesta veo que: si es tarjeta (no importa cual) haces lo mismo y si es por paypal, cambiás.

Le agregaría un class a cada radio para la tarjeta (por ej. clastarjeta) y tomás el evento click de esa clase
```
<input type="radio" name="radio" id="master" value="master" class="clasetarjeta">
<input type="radio" name="radio" id="visa" value="visa" class="clasetarjeta">
```
```
jQuery('.clasetarjeta').on('click', function(){
  $("#tarjeta").css("visibility", "visible");
  $("#n_tarjeta").css("visibility", "visible");
  $("#fecha_tarjeta").css("visibility", "visible");
  $("#f_tarjeta").css("visibility", "visible");
  $("#email").css("visibility", "hidden");
  $("#e_email").css("visibility", "hidden");
  $("#tarjeta").focus();
});
```
paypal, lo dejás como está.

En realidad, lo que haría sería cambiar los input radio por un select y, entonces, si agregás otra tarjeta, no cambiás nada o casi nada

Y el código sería (con un valor de id para el select de tipopago)
```
jQuery('#tipopago').on('change', function(){
     switch(jQuery(this).val()){
           case 0:
           case 1:
                   $("#tarjeta").css("visibility", "visible");
                   $("#n_tarjeta").css("visibility", "visible");
                   $("#fecha_tarjeta").css("visibility", "visible");
                   $("#f_tarjeta").css("visibility", "visible");
                   $("#email").css("visibility", "hidden");
                   $("#e_email").css("visibility", "hidden");
                   $("#tarjeta").focus(); 
                   break;        
           case 99:
                   $("#tarjeta").css("visibility", "hidden");
                   $("#n_tarjeta").css("visibility", "hidden");
                   $("#fecha_tarjeta").css("visibility", "hidden");
                   $("#f_tarjeta").css("visibility", "hidden");
                   $("#email").css("visibility", "visible");
                   $("#e_email").css("visibility", "visible");
                   $("#email").focus();
                   break;
     }
});
```
Como verás, todos los tipopago menos a 99 serán de tarjeta (tener la precaución de asignar como value de cada option estos valores) y el value con valor 99 será paypal.

Otra cosa que no tiene mucho que ver con tu pregunta es la utilización de la etiqueta table para mostrar los elementos html. Puede ser que venga de otra persona, puede ser que lo tengas hace mucho y tengas todo el sistema así pero sería buena práctica que vayas cambiando de a poco el html y codificarlo como corresponde con las etiquetas o elementos correspondientes para cada caso; es decir, con div; sobre todo si vas a utilizar la función each como propone Chrismart Anji (el cual hace un each de los inputs, en este caso vas a recorrer todos los inputs que existan, puede ser que funcione pero para hacer eso, va a recorrer cada tr y de cada tr cada td para ver donde están los inputs y eso lleva tiempo) además de que los robots buscadores te ponen como una nota baja, además de que quieras ver la página en un dispositivo móvil, seguramente no se verá bien. Esto último es solo un consejo

Con respecto a la pregunta espero que te sirva la posible solución (probala porque la hice acá, no la probé)

Saludos

DIEGO
Votos: 1 - Link respuesta
1

Abraham Wind Karma: 103

Fecha: 28-02-2017 12:07:48 No se si esto es solo para practicar pero la verdad no hay mucho beneficio en cambiar el codigo actual a un switch.
En mi opinion es mucho mas flexible de la forma actual ya que con un poco mas de estructura podrias habilitar/deshabilitar los tipos de pago con configuracion en lugar de editar el codigo. Votos: 1 - Link respuesta

Para participar activamente de la comunidad primero debes autenticarte, ingresa al sistema.Iniciar Sesión

frjcbbae garagebible.com

Pregunta:

¿Cómo hacer un Switch Case con JQuery para este código?[Resuelta]

Respuestas:

secciones

La comunidad

Mi Cuenta