如何实现选择表单选项时切换对应支付卡图片的透明度？

核心思路 #

先建立下拉选项值与对应图片ID的映射表，后续新增支付选项只需扩展映射表即可，无需修改核心逻辑。监听下拉框的change事件，每次触发时先重置所有图片透明度为默认的0.3，再根据选中的值找到对应图片将透明度设为1，同时页面初始化时处理默认选中项的显示状态。

完整代码实现 #

CSS（补充移动端默认透明度）

.itemForm2 {
  width: 100%;
  position: relative;
  margin-bottom: 18px;
  margin-top: 10px;
  display: flex;
  flex-direction: row;
}

.escolhaCartao {
  display: flex;
  flex-direction: row;
  width: 218px!important;
  gap: 10px;
}

/* 补充移动端图片默认透明度，确保全端统一初始状态 */
.escolhaCartao img {
  opacity: .3;
}

@media(min-width:768px) {
  .escolhaCartao {
    width: 258px!important;
    height: 34.32px;
    gap: 5px;
  }
  .lineFormCartao {
    display: flex;
    flex-direction: row;
    justify-content: inherit;
    gap: 16px;
  }
}

HTML（无需修改）

<div class="lineForm lineFormCartao">
  <div class="itemForm">
    <select id="OpcoesCartao" name="OpcoesCartao">
      <option value="1">Mastercard</option>
      <option value="2">Visa</option>
      <option value="3">Elo</option>
      <option value="4">Amex</option>
    </select>
  </div>
  <div class="itemForm2 escolhaCartao">
    <img id="master" src="images/master.png" alt="Logo cartão Mastercard">
    <img id="visa" src="images/visa.png" alt="Logo cartão Visa">
    <img id="elo" src="images/elo.png" alt="Logo cartão Elo">
    <img id="amex" src="images/amex.png" alt="Logo cartão Amex">
  </div>
</div>

JavaScript（通用处理逻辑）

// 建立选项值与图片ID的映射关系，便于后续扩展
const cardMap = {
  '1': 'master',
  '2': 'visa',
  '3': 'elo',
  '4': 'amex'
};

// 获取DOM元素
const cardSelect = document.getElementById('OpcoesCartao');
const cardImages = document.querySelectorAll('.escolhaCartao img');

// 通用更新透明度函数
function updateCardOpacity(selectedValue) {
  // 重置所有图片为默认透明度
  cardImages.forEach(img => {
    img.style.opacity = '0.3';
  });
  // 高亮选中对应的图片
  const targetImgId = cardMap[selectedValue];
  if (targetImgId) {
    document.getElementById(targetImgId).style.opacity = '1';
  }
}

// 监听下拉框切换事件
cardSelect.addEventListener('change', function() {
  updateCardOpacity(this.value);
});

// 页面加载时初始化默认选中项的高亮状态
updateCardOpacity(cardSelect.value);

关键说明 #

• 映射表cardMap让逻辑具备可扩展性，新增支付方式时只需添加对应键值对（比如'5': 'diners'）和图片元素即可，无需改动核心函数。
• 初始化调用updateCardOpacity确保页面加载完成后，默认选中的选项对应图片处于高亮状态。
• 先重置所有图片透明度的逻辑，避免切换选项时残留之前的高亮状态，保证每次只有当前选中的图片显示为不透明。

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