添加和删​​除类

时间:2016-11-07 04:08:18

标签: jquery

我有一张GLSurfaceView信用卡插件,当您输入信用卡号码时,会关闭一个显示所输入信用卡图像的课程。

如何每次清除信用卡以显示新信用卡?

jQuery

JS

<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>

2 个答案:

答案 0 :(得分:2)

  

从你的代码toggleClass不能单独工作,请参阅下面的toggleClass

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

因此,您需要在if语句之前删除或清空class属性,或者添加到每个case。

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

现在你的代码应该是

$('#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);  
        }
      }

我希望这会对你有所帮助。

答案 1 :(得分:0)

您可以将addClass和removeClass用于此目的

在卡类型上:签证,添加签证类别并删除其他卡类。

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

希望这有帮助