為什么當我在網站上上傳時我的 jQuery 不起作用

Question

當我在控制台上編寫代碼時，它可以正常工作。 當我在網站上上傳時，它不起作用。

我想做一個條紋卡詳細信息字段驗證。 填寫詳細信息時，填充框的邊框顏色應與卡片詳細信息相同

我試過的代碼：

if (jQuery('.input-text.wc-credit-card-form-card-expiry').val() == '') {
    jQuery('.input-text.wc-credit-card-form-card-expiry').css('border-color', 'red');
}
else {
    jQuery('.input-text.wc-credit-card-form-card-expiry').css('border-color', 'green');
}

網頁網址： https : //www.preprod.swett.se/checkout-2/

如果您在網站上查看。 卡號字段工作正常。 我希望到期日期和 cvv 字段日期也應該與卡片詳細信息相同

你能幫我這個jQuery嗎？

Answer 1

試試這個，看看它是否有效，請確保包含jQuery ：

jQuery('#stripe-card-expiry').on('keyup', function(){
  var $input = jQuery(this);
  $input.css('border-color', !$input.val() ? 'red' : 'green');

});

Answer 2

由於此代碼，卡號字段工作正常

    jQuery('#stripe-card-number').on('keyup', function ($) {
    if (jQuery(this).val().length > 0) {
        jQuery('#stripe-card-number').css('border', '2px solid #69bf29');
            }
    });

因此，類似地，您需要在 keyup 事件上觸發代碼以獲取到期日期和 cvv

jQuery('.wc-credit-card-form-card-expiry').on('keyup', function ($) {

   if (jQuery('.input-text.wc-credit-card-form-card-expiry').val() == '') {
       jQuery('.input-text.wc-credit-card-form-card-expiry').css('border-color', 'red');
   }
   else {
       jQuery('.input-text.wc-credit-card-form-card-expiry').css('border-color', 'green');
   }

});