jQuery实现：根据输入框指定类切换对应图标类

我的购物车系统已能自动识别信用卡类型，识别后会把输入框的Change-CC-Type类替换为对应卡种的类（比如amex、visa或mastercard）。现在需要编写jQuery脚本，同步将<i class="fa-credit-card">的图标类更新为对应卡种的Font Awesome图标类。

完整实现代码 #

HTML结构

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 需确保已引入Font Awesome图标库 -->
<input type="tel" class="form-control Change-CC-Type" id="an-cc-number" placeholder="Card Number" />
<i id="FA-CC" class="fa-regular fa-credit-card"></i>

jQuery脚本

// 建立卡种与对应图标类的映射表
const cardIconMap = {
  amex: 'fa-cc-amex',
  visa: 'fa-cc-visa',
  mastercard: 'fa-cc-mastercard'
};

// 封装更新图标的通用函数
function refreshCCIcon() {
  const ccInput = $('#an-cc-number');
  const ccIcon = $('#FA-CC');
  
  // 先移除所有可能的卡种图标类，避免样式冲突
  ccIcon.removeClass(Object.values(cardIconMap).join(' '));
  
  // 匹配当前输入框的卡种类
  let targetType = null;
  Object.keys(cardIconMap).forEach(type => {
    if (ccInput.hasClass(type)) {
      targetType = type;
    }
  });
  
  // 更新图标样式
  if (targetType) {
    ccIcon.addClass(cardIconMap[targetType]);
    ccIcon.removeClass('fa-credit-card');
  } else {
    ccIcon.addClass('fa-credit-card');
  }
}

// 监听输入框键盘事件，输入时实时更新图标
$('#an-cc-number').keyup(refreshCCIcon);

// 页面加载完成后初始化图标状态
$(document).ready(refreshCCIcon);

额外优化（应对异步类修改场景） #

如果购物车系统是通过异步逻辑修改输入框类（而非随键盘输入即时修改），可以添加DOM属性监听来确保图标同步更新：

// 监听输入框的class属性变化
const classObserver = new MutationObserver(refreshCCIcon);
classObserver.observe(document.getElementById('an-cc-number'), {
  attributes: true,
  attributeFilter: ['class']
});

内容的提问来源于stack exchange，提问作者Joseph Snedaker