当输入字段中的第一个字符更改时，jQuery更改类

Question

我正在尝试创建一个脚本来根据输入字段中的第一个字符更改信用卡图像。

我能够毫无问题地捕获第一个字符，但是当我设置条件时，无论输入什么字符，第一个 if 语句都会显示为 true。

我创建了一个jsFiddle here。添加了一些控制台日志，显示第一个字符被正确捕获，但第一个条件总是触发为真。

HTML

<div class="container">
  <div class="col-sm-6 col-sm-offset-3 col-xs-offset-0">
    <div class="form-group">
      <label>Credit Card Number</label>
      <input class="credit-card" type="text"/><i class="fa"></i>
    </div>
  </div>
</div>

jQuery

$(document).ready(function(){
    $('.form-group').on('click',function(){
        $(this).find('label').addClass('moveUp');
    });
    $('.credit-card').keyup(function(){
        var firstChar = $(this).val().charAt(0);

        console.log(firstChar)

        if ($(firstChar === 4)) {
            console.log('yup, you got a four');
            $(this).closest('.form-group').find('.fa').addClass('fa-cc-visa active');
        } else if ($(firstChar === 5)) {
            console.log('yup, you got a five');
            $(this).closest('.form-group').find('.fa').addClass('fa-cc-mastercard active');
        } else {
            $(this).closest('.form-group').find('.fa').removeAttr('class').addClass('fa');
        }
    });
});

Updated jsFiddle with working solution

Answer 1

var 类型有问题。

另一件事是当你将值从 4 更改为 5 或从 5 更改为 4 而不使用退格或删除时，你必须在添加新类之前清除类。

看，我将值转换为字符串。

工作小提琴：https://jsfiddle.net/9dc7tpLL/

   $(document).ready(function(){
    $('.form-group').on('click',function(){
        $(this).find('label').addClass('moveUp');
    });
    $('.credit-card').keyup(function(){
        var firstChar = $(this).val().charAt(0);



        if (String(firstChar) === "4") {
      $(this).closest('.form-group').find('.fa').removeAttr('class').addClass('fa');
            $(this).closest('.form-group').find('.fa').addClass('fa fa-cc-visa active');
        } else if (String(firstChar) == "5") {

      $(this).closest('.form-group').find('.fa').removeAttr('class').addClass('fa');
            $(this).closest('.form-group').find('.fa').addClass('fa-cc-mastercard active');
        } else {
            $(this).closest('.form-group').find('.fa').removeAttr('class').addClass('fa');
        }
    });
});

Answer 2

条件中不应有$() 包装器：

if (firstChar === "4") {

其他条件也应该修复。

---

编辑： 正如 drinchev 在评论中指出的那样，您还想更改条件本身的比较。您可以保持严格相等并使用=== "4" 将字符串与字符串进行比较，或者您可以尝试使用== 4 进行类型转换相等（双等号而不是三等号）。我会推荐第一个。

Answer 3

默认情况下，提供给 JavaScript 的任何 html 输入值都是字符串。由于您使用严格的JavaScript compare operator ===，因此您需要在比较语句的右侧提供一个字符串。

$(document).ready(function(){
    $('.form-group').on('click',function(){
        $(this).find('label').addClass('moveUp');
    });
    $('.credit-card').keyup(function(){
        var firstChar = $(this).val().charAt(0);

        console.log(firstChar)

        if (firstChar === "4") {
                      //  ^ removes `$(..)` and add string compare
            console.log('yup, you got a four');
            $(this).closest('.form-group').find('.fa').addClass('fa-cc-visa active');
        } else if (firstChar === "5") {
            console.log('yup, you got a five');
            $(this).closest('.form-group').find('.fa').addClass('fa-cc-mastercard active');
        } else {
            $(this).closest('.form-group').find('.fa').removeAttr('class').addClass('fa');
        }
    });
});

.fa-cc-visa {
  background-color: red;
}

.fa-cc-mastercard {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="col-sm-6 col-sm-offset-3 col-xs-offset-0">
    <div class="form-group">
      <label>Credit Card Number</label>
      <input class="credit-card" type="text"/><i class="fa">C</i>
    </div>
  </div>
</div>

我在上面所做的更改是现在我正在比较两个字符串而不是一个字符串和一个数字。