是否可以使用jQuery将更改事件应用于值的子字符串？

我正在为一个客户创建一个信用卡表单，并希望该客户开始键入其信用卡号后，信用卡公司的徽标就会出现

所有签证都从4开始。MC与5。发现与6。美国运通36家，餐车37家

所以我试着这样做：

<script>
    $(document).ready(function() {
        $($('#cardNumber').val().substring(0,1)).change(function() {
            switch ($(this).val()) {
                case '4':
                    $('#cardImage').hide().html('<img src="img/visa.png" alt="Visa" style="width: 50px; height: 30px;">').fadeIn(250);
                    break;
                case '5':
                    $('#cardImage').hide().html('<img src="img/mastercard.png" alt="Mastercard" style="width: 50px; height: 30px;">').fadeIn(250);
                    break;
                case '6':
                    $('#cardImage').hide().html('<img src="img/discover.png" alt="Discover" style="width: 50px; height: 30px;">').fadeIn(250);
                    break;
            }
        });
    });
</script>

<form name="creditCardForm" id="creditCardForm" action="" method="post">
    <fieldset>
        <label for="cardNumber">Card Number:</label>
        <span id="cardImage"></span>
        <input type="text" name="cardNumber" id="cardNumber">
    </fieldset>
</form>

$（文档）.ready（函数（）{
$（$（'#cardNumber'）.val（）.substring（0,1））.change（function（）{
开关（$（this.val（））{
案例“4”：
$（'#cardImage'）.hide（）.html（''）.fadeIn（250）；
打破
案例“5”：
$（'#cardImage'）.hide（）.html（''）.fadeIn（250）；
打破
案例“6”：
$（'#cardImage'）.hide（）.html（''）.fadeIn（250）；
打破
}
});
});
卡号：

…而我正试图对值中的第一个字符应用更改函数。这样的事情可能吗

--更新--

根据下面的注释，我修改了表单，使其具有一个隐藏字段，其中只包含输入的第一个数字。我现在遇到的问题是，keyup没有触发隐藏字段的更改。将.change（）函数链接到隐藏字段的末尾会触发每次显示图像。我不希望在键入第一个数字后取消0绑定事件，以防用户返回并再次修改第一个数字

有什么想法可以继续吗

<script>
    $(document).ready(function() {
        $('#cardNumber').on('keyup', function() {
            $('#firstCreditCardDigit').val($(this).val().substring(0,1));
        });

        $('#firstCreditCardDigit').change(function() {
            switch ($(this).val()) {
                case '4':
                    $('#cardImage').hide().html('<img src="img/visa.png" alt="Visa" style="width: 50px; height: 30px;">').fadeIn(250);
                    break;
                case '5':
                    $('#cardImage').hide().html('<img src="img/mastercard.png" alt="Mastercard" style="width: 50px; height: 30px;">').fadeIn(250);
                    break;
                case '6':
                    $('#cardImage').hide().html('<img src="img/discover.png" alt="Discover" style="width: 50px; height: 30px;">').fadeIn(250);
                    break;
            }
        });
    });
</script>

<form name="creditCardForm" id="creditCardForm" action="" method="post">
    <input type="hidden" name="firstCreditCardDigit" id="firstCreditCardDigit">
    <fieldset>
        <label for="cardNumber">Card Number:</label>
        <span id="cardImage"></span>
        <input type="text" name="cardNumber" id="cardNumber">
    </fieldset>
</form>

$（文档）.ready（函数（）{
$（'#cardNumber'）。在（'keyup'，function（）上{
$（'#firstCreditCardDigit'）.val（$（this.val（）.substring（0,1））；
});
$（'#firstCreditCardDigit'）。更改（函数（）{
开关（$（this.val（））{
案例“4”：
$（'#cardImage'）.hide（）.html（''）.fadeIn（250）；
打破
案例“5”：
$（'#cardImage'）.hide（）.html（''）.fadeIn（250）；
打破
案例“6”：
$（'#cardImage'）.hide（）.html（''）.fadeIn（250）；
打破
}
});
});
卡号：

我会在（“propertychange keyup input cut paste”）上使用类似于

的函数（ev）{}

相反，您可以执行以下操作：

---

我会在（“propertychange keyup input cut paste”）上使用类似于

的函数（ev）{}

，您可以执行以下操作：

---

事件应用于元素，只能验证内容。 您可以尝试类似的方法，即使有人键入411111111111111111，然后将4更改为5，它也会起作用

    $(document).ready(function() {
            $('#cardNumber').change(function() {
                var firstDigit= $(this).val().substring(0, 1);
                switch (firstDigit) {
                    case '4':
                        $('#cardImage').hide().html('<img src="img/visa.png" alt="Visa" style="width: 50px; height: 30px;">').fadeIn(250);
                        break;
                    case '5':
                        $('#cardImage').hide().html('<img src="img/mastercard.png" alt="Mastercard" style="width: 50px; height: 30px;">').fadeIn(250);
                        break;
                    case '6':
                        $('#cardImage').hide().html('<img src="img/discover.png" alt="Discover" style="width: 50px; height: 30px;">').fadeIn(250);
                        break;
                }

            });
});

$（文档）.ready（函数（）{
$（'#cardNumber'）。更改（函数（）{
var firstDigit=$（this.val（）.substring（0,1）；
开关（第一位）{
案例“4”：
$（'#cardImage'）.hide（）.html（''）.fadeIn（250）；
打破
案例“5”：
$（'#cardImage'）.hide（）.html（''）.fadeIn（250）；
打破
案例“6”：
$（'#cardImage'）.hide（）.html（''）.fadeIn（250）；
打破
}
});
});

事件应用于元素，只能验证内容。 您可以尝试类似的方法，即使有人键入411111111111111111，然后将4更改为5，它也会起作用

    $(document).ready(function() {
            $('#cardNumber').change(function() {
                var firstDigit= $(this).val().substring(0, 1);
                switch (firstDigit) {
                    case '4':
                        $('#cardImage').hide().html('<img src="img/visa.png" alt="Visa" style="width: 50px; height: 30px;">').fadeIn(250);
                        break;
                    case '5':
                        $('#cardImage').hide().html('<img src="img/mastercard.png" alt="Mastercard" style="width: 50px; height: 30px;">').fadeIn(250);
                        break;
                    case '6':
                        $('#cardImage').hide().html('<img src="img/discover.png" alt="Discover" style="width: 50px; height: 30px;">').fadeIn(250);
                        break;
                }

            });
});

$（文档）.ready（函数（）{
$（'#cardNumber'）。更改（函数（）{
var firstDigit=$（this.val（）.substring（0,1）；
开关（第一位）{
案例“4”：
$（'#cardImage'）.hide（）.html（''）.fadeIn（250）；
打破
案例“5”：
$（'#cardImage'）.hide（）.html（''）.fadeIn（250）；
打破
案例“6”：
$（'#cardImage'）.hide（）.html（''）.fadeIn（250）；
打破
}
});
});

否，事件适用于元素，而不是内容。请查看我的答案是否有帮助：）否，事件适用于元素，而不是内容。请查看我的答案是否有帮助：）这已接近。。。但它不考虑值是否已经存在。例如，我希望有人能够输入一个数字，改变主意，输入一个不同的数字，而不必将字段留空。IE：有人输入一个签证号码，然后回去把4改成5。哦，我明白了，让我想想；）这很接近。。。但它不考虑值是否已经存在。例如，我希望有人能够输入一个数字，改变主意，输入一个不同的数字，而不必将字段留空。IE：有人输入一个签证号码，然后回去把4改成5。哦，我明白了，让我想想；）