Adding and removing classes

Question

I have a jQuery Credit Card Plugin and when you enter the credit card number it switches out a class that shows an image for the credit card entered.

How to I clear the credit card each time for the new one to appear?

<div> <form> <div id="ccc" class="form-group add-on"> <label for="ccnumber">Credit card Number</label> <input type="text" class="form-control" id="credit-card" placeholder="Credit Card Number"> </div> </form> <div id="output"></div> <div id="c-card-type"></div> </div>

JS

if(cardType == null){ return; }else{ switch(cardType.name){ case 'visa': $('#output').html('This Card is visa'); $('#c-card-type').toggleClass('c-card vs'); break; case 'mastercard': $('#output').html('This Card is mastercard'); $('#c-card-type').toggleClass('c-card mc'); break; case 'ax': $('#output').html('This Card is ax'); $('#c-card-type').toggleClass('c-card ax'); break; default: $('#output').html('We dont support ' + cardType.name); } }

This problem is ambiguous to me. can you please provide full html and js code for better understanding? I am not getting any img that you mention in your question. — Ari4
– Ari4, Commented Nov 7, 2016 at 4:22

Sathish · Accepted Answer · 2016-11-07 04:35:20Z

From your code toggleClass will not work alone, please see the below example of toggleClass

<div id='mydiv' class="class1"></div> $('#mydiv').toggleClass('class1 class2'); output: <div id='mydiv' class="class2"></div>

So you need to remove or empty the class attribute before the if statement or add to each case.

 $('#c-card-type').attr('class',''); or $('#c-card-type').removeAttr('class');

now your code should be

$('#c-card-type').attr('class',''); if(cardType == null){ return; }else{ switch(cardType.name){ case 'visa': $('#output').html('This Card is visa'); // $('#c-card-type').attr('class',''); $('#c-card-type').toggleClass('c-card vs'); break; case 'mastercard': $('#output').html('This Card is mastercard'); // $('#c-card-type').attr('class',''); $('#c-card-type').toggleClass('c-card mc'); break; case 'ax': $('#output').html('This Card is ax'); // $('#c-card-type').attr('class',''); $('#c-card-type').toggleClass('c-card ax'); break; default: $('#output').html('We dont support ' + cardType.name); } }

I hope this will help you.

Thanks, I got removeAttribute() not a function so I used removeAttr()

Geeky · Accepted Answer · 2016-11-07 04:23:07Z

You can use addClass and removeClass for this purpose

on a card type ex:visa,add visa class and remove other card classes.

 var cardTypeObj= $('#c-card-type'); if(cardType == null){ return; }else{ cardTypeObj.addClass('c-card') switch(cardType.name){ case 'visa': $('#output').html('This Card is visa'); cardTypeObj.addClass('vs'); cardTypeObj.removeClass('mc ax'); break; case 'mastercard': $('#output').html('This Card is mastercard'); cardTypeObj.addClass('mc').removeClass('vs ax'); break; case 'ax': $('#output').html('This Card is ax'); cardTypeObj.addClass('ax').removeClass('mc vs'); break; default: $('#output').html('We dont support ' + cardType.name); } }

Hope this helps

Collectives™ on Stack Overflow

Adding and removing classes

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related