爲什麼這個jquery不起作用？

Question

檢查這個小提琴http://jsfiddle.net/KaDy8/7/。 這是我的jQuery代碼

jQuery(document).ready(function(){ 
$('input[name="cardnumber"]').on('keyup',function(){ 
    var cc_num = $('input[name="cardnumber"]').val(); 
    if(cc_num.charAt(0)=='4'){ 
    $('#visa').addClass("active"); 
    $('#mastercard ').removeClass("active"); 
    }else if(cc_num.charAt(0)=='5'){ 
    $('#mastercard').addClass("active"); 
    $('#visa').removeClass("active"); 
    } 
}); 
}); 

當我進入4，活動類應該被添加到UI元素的簽證，而當我鍵入5活動類應該被添加到一個UI元素mastercard.It工作時，我輸入5到該字段中，卡正在變化，即它將類添加到ul元素mastercard，但是如果我輸入4，那麼它不會將類添加回ul元素簽證。可能是什麼問題？

Answer 1

我認爲這是不正確的做法。藉助具有獨特形式的CSS，您可以簡化它。看看這個demo，這是你演示的修改後的形式。您可以輕鬆地做這件事情，通過改變主類可以改變你的演示

現在，你的HTML看起來像

<section id='cards' class="credit-card visa gr-cards"> 
     <div class="visa-logo">visa</div> 
     <div class="mastercard-logo"><div></div><div></div></div> 
     <form> 
      <h2>Payment Details</h2> 

      <ul class="inputs"> 
       <li> 
        <label>Card Number</label> 
        <input type="text" name="cardnumber" pattern="[0-9]{13,16}" class="full gr-input" required /> 
       </li> 
      <li> 
      <label>Name on card</label> 
      <input type="text" name="card_name" size="20" class="month gr-input" required /> 
       <li class="expire last"> 
        <label>Expiration</label> 

       <div class="dropdown"> 
     <select name="one" class="dropdown-select month gr-input"> 
     <option value="">Month</option> 
     <option value="1">Jan</option> 
     <option value="2">Feb</option> 
     <option value="3">Mar</option> 
    <option value="4">Apr</option> 
     <option value="5">May</option> 
     <option value="6">Jun</option> 
    <option value="7">Jul</option> 
    <option value="8">Aug</option> 
    <option value="9">Sep</option> 
    <option value="10">Oct</option> 
    <option value="11">Nov</option> 
    <option value="12">Dec</option> 

     </select> 
    </div>   

      <div class="dropdown"> 
     <select name="one" class="dropdown-select year gr-input"> 
     <option value="">Year</option> 
      <option value="2013">2013</option> 
     <option value="2014">2014</option> 
     <option value="2015">2015</option> 
    <option value="2016">2016</option> 
     <option value="2017">2017</option> 
     <option value="2018">2018</option> 
    <option value="2019">2019</option> 
    <option value="2020">2020</option> 
    <option value="2021">2021</option> 
    <option value="2022">2022</option> 
    <option value="2023">2023</option> 
    <option value="2024">2024</option> 
     </select> 
    </div> 

        <div class="clearfix"></div> 
       </li> 
       <li class="cvc-code last"> 
        <label>CVV Code</label> 
        <input type="text" name="cvc_code" value="174" size="10" class="gr-input" required /> 
       </li> 
       <input type="post" name="submit" value="Pay Now" class="fsSubmitButton"/> 
       <div class="clearfix"></div> 
      </ul> 
     </form> 
     <div class="visa-watermark">visa</div> 
     <div class="mastercard-watermark"><div></div><div></div></div> 
    </section> 

而且JS如下

$(document).ready(function(){ 
    $('input[name="cardnumber"]').on('keyup',function(){ 
     var cc_num = $(this).val(); 
     if(cc_num.charAt(0)=='4'){ 
      $('#cards.credit-card').removeClass("visa mastercard").addClass("visa"); 
     } else if(cc_num.charAt(0)=='5'){ 
      $('#cards.credit-card').removeClass("visa mastercard").addClass("mastercard"); 
     } 
    }); 
}); 

對於新的CSS的整個部分請參閱demo

現在您可以重複使用相同的表格簽證&萬事達卡。請享用！！！！

Answer 2

的問題是，

var cc_num = $('input[name="cardnumber"]').val(); 

總是會得到第一input元素的值與該名稱，而不是觸發事件之一。

一旦你5類型的，即input消失（你有沒有注意到如何5消失？）。現在輸入的任何值都將輸入第二個input元素，該元素位於#mastercard之內。第一個input元素（屬於#visa的元素）的值仍然是5，並且不會更改。這就是爲什麼條件cc_num.charAt(0)=='4'從未實現。

var cc_num = $(this).val(); 

（DEMO）

這不是一個令人滿意的解決方案，雖然因爲：

你可以通過獲取當前input元素，從而引發了keyup事件的價值解決眼前的問題現在再次顯示第一個input元素（在#visa中），並且仍包含值5。這是一個非常令人困惑的行爲：用戶只需輸入4，並將其更改爲5！

如果我是你，我只有一組表單元素（即只有一個input字段），並且只處理CSS的所有樣式更改。例如：http://jsfiddle.net/KaDy8/16/。

Answer 3

您對bot輸入字段（cardnumber）使用相同的名稱。給輸入賦予唯一的名稱並檢查它。

Answer 4

請看看http://jsfiddle.net/KaDy8/11/

jQuery(document).ready(function(){ 
$('input[name="cardnumber"]').on('keyup',function(){ 
    var cc_num = $(this).val(); 
    if(cc_num.charAt(0)=='4'){ 
    $('#visa').addClass("active"); 
    $('#mastercard ').removeClass("active"); 
    }else if(cc_num.charAt(0)=='5'){ 
    $('#visa').removeClass("active"); 
    $('#mastercard').addClass("active"); 
    } 
}); 
}); 

Answer 5

這裏是演示： - jsfiddle.net/KaDy8/12/

這是你的問題

現在瞭解什麼是您的情況的問題 第一的演示所有你應該寫$(this).val();採取當前輸入，以便您將始終獲得當前輸入。