如何获取用户选中的卡片样式及对应值并传递到后端

核心逻辑 #

你使用的是Swiper轮播组件，当前选中的卡片对应Swiper的activeIndex激活索引，拿到索引后即可提取对应卡片的所有字段值，组装后提交到后端即可。

代码实现 #

1. JS逻辑编写 #

// 初始化Swiper实例（保留你原有配置，新增事件监听即可）
const cardSwiper = new Swiper('.swipercards', {
  // 原有配置项：loop、slidesPerView等保持不变
  on: {
    // 轮播切换完成时触发
    slideChange: getCurrentCard,
    // 点击卡片时触发（可选，适配点击选中场景）
    click: getCurrentCard
  }
})

// 提取当前激活卡片信息的方法
function getCurrentCard() {
  // 拿到当前激活的slide节点
  const activeCard = document.querySelectorAll('.swipercards .swiper-slide')[cardSwiper.activeIndex]
  // 组装卡片参数
  const submitData = {
    cardType: activeCard.querySelector('.card-header h6').textContent.trim(),
    cardNumber: activeCard.querySelector('.card .card-body h5').textContent.replaceAll(' ', ''),
    expiryDate: activeCard.querySelector('.card-footer .col p').textContent.trim(),
    cardHolder: activeCard.querySelector('.card-footer .col-auto p').textContent.trim()
  }
  // 此处直接调用后端接口提交submitData即可
  // 提交示例：
  // axios.post('/your/api/path', submitData).then(res => {
  //   // 处理提交结果
  // })
}

2. 可选优化（推荐） #

可以直接给每张swiper-slide节点预存卡片参数，避免每次从DOM多层查询，修改HTML如下：

<div class="swiper-slide" 
  data-card-type="Visa" 
  data-card-number="44445264254126651" 
  data-expiry="26/21" 
  data-holder="Agnish Carvan">
  <!-- 原有卡片内容不变 -->
</div>

对应的提取逻辑可简化为：

function getCurrentCard() {
  const activeCard = document.querySelectorAll('.swipercards .swiper-slide')[cardSwiper.activeIndex]
  const submitData = activeCard.dataset
  // 直接取submitData.cardType、submitData.cardNumber等字段提交即可
}

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