Actualización de la presentación de un campo de tarjeta de crédito a medida que se conoce el tipo de tarjeta -- javascript campo con jquery campo con form campo con e-commerce camp codereview Relacionados El problema

Updating the presentation of a credit card field as the card type becomes known


6
vote

problema

Español

El objetivo aquí es, agregar una imagen de tarjeta de crédito y eliminar todas las otras imágenes de la tarjeta de crédito, de un cierto campo de entrada. Tuve un código aún más grande, con una gran cantidad de AddClass () y RemoveClass () ... entonces, lo encogí hasta que tenga esto. Aún así, siento que sigue siendo un enorme bloque de código.

El punto aquí es para las cosas cortas, pero no hasta que sea difícil entender lo que está pasando.

  if (event.isValid) {      if (event.card.type == 'visa') {          $("#card-number").addClass(CREDIT_CARD_LIST.replace(CREDIT_CARD_LIST, 'e-visa'));      } else if (event.card.type == 'master-card') {          $("#card-number").addClass(CREDIT_CARD_LIST.replace(CREDIT_CARD_LIST, 'e-master-card'));      } else if (event.card.type == 'e-american-express') {          $("#card-number").addClass(CREDIT_CARD_LIST.replace(CREDIT_CARD_LIST, 'e-american-express'));      } else if (event.card.type == 'diners-club') {          $("#card-number").addClass(CREDIT_CARD_LIST.replace(CREDIT_CARD_LIST, 'e-diners-club'));      } else if (event.card.type == 'discover') {          $("#card-number").addClass(CREDIT_CARD_LIST.replace(CREDIT_CARD_LIST, 'e-discover'));      } else if (event.card.type == 'jcb') {          $("#card-number").addClass(CREDIT_CARD_LIST.replace(CREDIT_CARD_LIST, 'e-jcb'));      } else if (event.card.type == 'unionpay') {          $("#card-number").addClass(CREDIT_CARD_LIST.replace(CREDIT_CARD_LIST, 'e-unionpay'));      } else if (event.card.type == 'maestro') {          $("#card-number").addClass(CREDIT_CARD_LIST.replace(CREDIT_CARD_LIST, 'e-maestro'));     }  } else {      $("#card-number").removeClass(CREDIT_CARD_LIST); }   
Original en ingles

The goal here is to, add a credit card image, and remove all other credit card images, of a certain input field. I had a even larger code, with a lot of addClass() and removeClass()... then, I shrink it until I have this. Still, I feel it's still a huge block of code.

The point here is to short things up, but NOT until it's hard to understand what's going on.

if (event.isValid) {      if (event.card.type == 'visa') {          $("#card-number").addClass(CREDIT_CARD_LIST.replace(CREDIT_CARD_LIST, 'e-visa'));      } else if (event.card.type == 'master-card') {          $("#card-number").addClass(CREDIT_CARD_LIST.replace(CREDIT_CARD_LIST, 'e-master-card'));      } else if (event.card.type == 'e-american-express') {          $("#card-number").addClass(CREDIT_CARD_LIST.replace(CREDIT_CARD_LIST, 'e-american-express'));      } else if (event.card.type == 'diners-club') {          $("#card-number").addClass(CREDIT_CARD_LIST.replace(CREDIT_CARD_LIST, 'e-diners-club'));      } else if (event.card.type == 'discover') {          $("#card-number").addClass(CREDIT_CARD_LIST.replace(CREDIT_CARD_LIST, 'e-discover'));      } else if (event.card.type == 'jcb') {          $("#card-number").addClass(CREDIT_CARD_LIST.replace(CREDIT_CARD_LIST, 'e-jcb'));      } else if (event.card.type == 'unionpay') {          $("#card-number").addClass(CREDIT_CARD_LIST.replace(CREDIT_CARD_LIST, 'e-unionpay'));      } else if (event.card.type == 'maestro') {          $("#card-number").addClass(CREDIT_CARD_LIST.replace(CREDIT_CARD_LIST, 'e-maestro'));     }  } else {      $("#card-number").removeClass(CREDIT_CARD_LIST); } 
           
   
   

Lista de respuestas

5
 
vote

Crear un mapa de /* it is not good for a public API <hide-this> */ public Object getData() { return this.data; } public void setData(Object data) { this.data = data; } public LinkedList getNext() { return this.next; } public void SetNext(LinkedList next) { this.next = next; } // </hide-this> 3 a qué clase debería ser:

  /*     it is not good for a public API     <hide-this>  */     public Object getData() {         return this.data;     }       public void setData(Object data) {         this.data = data;     }      public LinkedList getNext() {         return this.next;     }      public void SetNext(LinkedList next) {         this.next = next;     } // </hide-this> 4  

Esto crea una matriz asociativa, por lo que si le da un valor clave, puede sacar el valor asociado.

en su caso que se hace como:

  /*     it is not good for a public API     <hide-this>  */     public Object getData() {         return this.data;     }       public void setData(Object data) {         this.data = data;     }      public LinkedList getNext() {         return this.next;     }      public void SetNext(LinkedList next) {         this.next = next;     } // </hide-this> 5  

Esto concentra el mapeo en una sola sección y separa lo que realmente hace el código.

 

Create a map from card.type to what class it should be:

var cardTypeToClass = {  'visa': 'e-visa',                          'master-card': 'e-master-card',                          //...                        }; 

This creates an associative array so if you give it a key value then you can get out the associated value.

in your case that is done like:

if (event.isValid) {     $("#card-number").addClass(CREDIT_CARD_LIST.replace(CREDIT_CARD_LIST, cardTypeToClass[event.card.type])); } else {     $("#card-number").removeClass(CREDIT_CARD_LIST); } 

This concentrates the mapping into a single section and separates out what the code actually does.

 
 
   
   
4
 
vote

Parece que el valor que está intentando reemplazar es realmente solo el /* it is not good for a public API <hide-this> */ public Object getData() { return this.data; } public void setData(Object data) { this.data = data; } public LinkedList getNext() { return this.next; } public void SetNext(LinkedList next) { this.next = next; } // </hide-this> 6 prefijado por /* it is not good for a public API <hide-this> */ public Object getData() { return this.data; } public void setData(Object data) { this.data = data; } public LinkedList getNext() { return this.next; } public void SetNext(LinkedList next) { this.next = next; } // </hide-this> 7 , así que solo cadena concatenarlos.

Sin embargo, , si algunas de las variables reemplazaron, no no siguen este patrón, sería mejor usar la solución de @ratchet Freak.

  /*     it is not good for a public API     <hide-this>  */     public Object getData() {         return this.data;     }       public void setData(Object data) {         this.data = data;     }      public LinkedList getNext() {         return this.next;     }      public void SetNext(LinkedList next) {         this.next = next;     } // </hide-this> 8  
 

It seems the value you're trying to replace for is really just the event.card.type prefixed by e-, so just string concatenate them together.

However, if some of the replace variables do not follow this pattern, it'd be best to use @ratchet freak's solution.

if (event.isValid) {     $("#card-number").addClass(CREDIT_CARD_LIST.replace(CREDIT_CARD_LIST, 'e-' + event.card.type)); } else {     $("#card-number").removeClass(CREDIT_CARD_LIST); } 
 
 
   
   

Relacionados problema

1  Comprobando los campos de dirección para la presencia de un cuadro de correos de oficina  ( Checking address fields for presence of a post office box ) 
Solo estoy tratando de aprender a escribir un jQuery mejor, así que quería algunas opiniones de los pueblos inteligentes. El código está revisando los campo...

2  Método de controlador de rieles para crear un cliente con información de tarjeta de crédito  ( Rails controller method to create a customer with credit card info ) 
Estoy trabajando en una aplicación de rieles que tiene mucha lógica en el controlador que debe estar en el modelo. En el app/controllers/customers_controller...

4  Mi clase de carrito de compras perfecta  ( My perfect shopping cart class ) 
¡Aquí está la clase de mi carrito de compras! Quiero que sea perfecto y nunca tendrá que implementarlo. ¿Qué mejoras harías? Nuevo: icomparable public ...

5  OO Carrito de la compra Clase + Clase de producto Interacción  ( Oo shopping cart class product class interaction ) 
He construido un sitio pequeño para fines de aprendizaje. Cargué mis 'productos' desde la Clase de DB en una clase 9988777665544330 . Utilicé un método de es...

6  Carro de la compra con descuentos  ( Shopping cart with discounts ) 
Quiero crear un proyecto de carrito de compras con descuentos para productos. Por ejemplo, si compra 2 libros, puede obtener un 10% de descuento en Pens de Pa...

6  Servicio de carrito de la compra de Python GRPC  ( Python grpc shopping cart service ) 
El archivo 99887776655443311 es lo siguiente: System.Drawing.Graphics2 y tengo un servicio 998877766555443313 en GRPC es tan simple como se muestra ...

3  Carro de la compra AJAX con cantidad +/- Botones  ( Ajax shopping cart with quantity buttons ) 
Soy un desarrollador junior (Pareja de años) y muy nuevo en AJAX. Estoy escribiendo una solicitud de inventario interna construida en MVC y en este momento ...

1  Una aplicación web de Java con Servlet, JSP y sesión: Ejemplo de carro de la compra  ( A java web app with servlets jsp and session shopping cart example ) 
Este es el único servlet que tengo: package com.tugay.shopping; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import ...

1  Mapeo manual de objetos complejos usando Windows Service & Shopify  ( Manually mapping complex objects using windows service shopify ) 
Estoy buscando orientación / revisión en un enfoque que he tomado. estructura Servicio de Windows Shopify Module (API) OFICIAL PRESENTACIÓN API ...

1  Front End to PHP Cesta de la compra  ( Front end to php shopping cart ) 
Soy muy nuevo en JQuery y Javascript en general, pero decidió desarrollar mi propio código en lugar de usar los complementos de terceros, ya que realmente nec...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos