添加和刪除類

我有一個jQuery信用卡插件，當您輸入信用卡號時，它將切換出一個顯示輸入信用卡圖像的類。添加和刪除類

如何每次清除信用卡以使新的信用卡出現？

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

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

來源

2016-11-07 ottz0

這個問題是不明確的給我。你能否提供完整的html和js代碼以便更好地理解？我沒有得到任何你提到的問題。 – Ari4

從你的代碼toggleClass不會單獨工作，請參閱toggleClass
的下面的例子

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

所以，你需要刪除或在if語句之前清空類屬性或添加到每個案例。

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

我希望這會幫助你。

來源

2016-11-07 04:21:34 Sathish

謝謝，我得到removeAttribute（）不是一個函數，所以我用removeAttr（） – ottz0

您可以使用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); 
     } 
     }

希望這有助於

來源

2016-11-07 04:23:07 Geeky

添加和刪除類

回答

相關問題