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

条件中应该没有$()包装：

if (firstChar === "4") {

另一个条件也应该修复。

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

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

我上面改变的是，我现在比较两个字符串而不是字符串和数字。

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

2 个答案: