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

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);
}

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.

StackExchange Code Review Q#102659, answer score: 5