1

Llegué 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></p>
                            <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>

2 respuestas 2

2

Tu código es parcialmente redundante. Los campos para el pago por Visa y por Master Card son exactamente iguales. El único que difere es el pago por PayPal. No hay necesidad de usar switch, más lógico es usar una simple condicional. Ergo, como tu pedido es hacerlo por switch, te dejo un ejemplo usando esta estructura y modificando un poco tu código.

$('#payment-data').css('display', 'none');

$('[name="payment-method"]').on('change', function () {
	switch($(this).val()) {
  	case 'visa': ;
    case 'master-card': payWithCreditCard(); break;
    case 'paypal': payWithPaypal();
  }
  $('#payment-data').show('500');
});

function resetFields() {
	$("#n_email").css("display", "block");
  $("#email").css("display", "block");

	$("#n_card").css("display", "block");
  $("#card").css("display", "block");

  $("#n_exp").css("display", "block");
  $("#exp").css("display", "block");
}

function payWithCreditCard () {
	resetFields();
	$("#n_email").css("display", "none");
  $("#email").css("display", "none");

  $("#card").focus();
}

function payWithPaypal () {
	resetFields();
	$("#n_card").css("display", "none");
  $("#card").css("display", "none");

  $("#n_exp").css("display", "none");
  $("#exp").css("display", "none");
  
  $("#email").focus();
}
*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: #fff;
  font-family: 'Segoe UI', 'Ubuntu';
  padding: 12px;
}

fieldset {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
}

legend {
  color: #555;
  font-size: 14px;
}

label,
input {
  color: #555;
  font-size: 14px;
}

.row {
  flex-wrap: wrap;
}

.col,
.form-group {
  width: 100%;
}

.col {
  margin: 5px 0;
}

.form-group > * {
  display: block;
  margin: 3px 0;
}

.form-group > label {
  color: #777;
  font-size: 14px;
  font-weight: bold;
}

.input {
  border: 1px solid #ccc;
  border-radius: 3px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1) inset;
  color: #555;
  font-size: 14px;
  height: 35px;
  padding: 0 .75rem;
  transition: all .25s var(--ease);
  width: 100%;
}

.input:focus {
  border-color: rgba(0, 100, 255, .5);
  outline: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset>
  <legend>Método de pago</legend>
  <input type="radio" name="payment-method" id="visa" value="visa">
  <label for="visa">Visa</label>
  <input type="radio" name="payment-method" id="master-card" value="master-card">
  <label for="master-card">Master Card</label>
  <input type="radio" name="payment-method" id="paypal" value="paypal">
  <label for="paypal">PayPal</label>
</fieldset>
<fieldset style="margin-top: 15px" id="payment-data">
  <legend >Datos de pago</legend>
  <div class="row">
    <div class="col">
      <div class="form-group">
        <label id="n_card" for="card">N° Tarjeta</label>
        <input type="text" id="card" class="input">
      </div>
    </div>
    <div class="col">
      <div class="form-group">
        <label id="n_exp" for="exp">Fecha Exp.</label>
        <input type="text" id="exp" class="input">
      </div>
    </div>
    <div class="col">
      <div class="form-group">
        <label id="n_email" for="email">Email</label>
        <input type="email" id="email" class="input">
      </div>
    </div>
  </div>
</fieldset>

0

Esto es lo que yo haría

$("#visa, #master, #paypal").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();

});

[Edito]: en el caso de paypal podrías hacer una condicion para capturar a q boton se le esta haciendo click.

Si no me falla la memoria

if( $(this).attr('id') == 'paypal'){
    // código
}

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.