如何知道选择的卡片样式并将值传给后台

Question

我想获取用户选择的单张卡片中的值post到后台

<div class="card-body">
  <div class="swiper-container swipercards">
    <div class="swiper-wrapper pb-4">
      <div class="swiper-slide ">
        <div class="card border-0 bg-default text-white">
          <div class="card-header">
            <div class="row">
              <div class="col-auto">
                <i class="material-icons vm text-template">credit_card</i>
              </div>
              <div class="col pl-0">
                <h6 class="mb-1">Visa</h6>
              </div>
            </div>
          </div>
          <div class="card-body">
            <h5 class="mb-0 mt-3">4444 5264 2541 26651</h5>
          </div>
          <div class="card-footer">
            <div class="row">
              <div class="col">
                <p class="mb-0">26/21</p>
                <p class="small ">Expiry date</p>
              </div>
              <div class="col-auto align-self-center text-right">
                <p class="mb-0">Agnish Carvan</p>
                <p class="small">Card Holder</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-slide ">
        <div class="card border-0 bg-warning text-white">
          <div class="card-header">
            <div class="row">
              <div class="col-auto">
                <i class="material-icons vm text-template">credit_card</i>
              </div>
              <div class="col pl-0">
                <h6 class="mb-1">Maestro</h6>
              </div>
            </div>
          </div>
          <div class="card-body">
            <h5 class="mb-0 mt-3">4444 5264 2541 26651</h5>
          </div>
          <div class="card-footer">
            <div class="row">
              <div class="col">
                <p class="mb-0">26/21</p>
                <p class="small ">Expiry date</p>
              </div>
              <div class="col-auto align-self-center text-right">
                <p class="mb-0">Agnish Carvan</p>
                <p class="small">Card Holder</p>
              </div>
            </div>
          </div>
        </div>
      </div>

Answer 1

欢迎使用 AegisFor。您似乎在使用 Swiper.js?

根据文档，在事件下，您可以通过以下方式确定轮播中的所选项目：

const swiper = new Swiper('.swiper', {
  // ...
});
swiper.on('slideChange', function () {
  console.log('slide changed', swiper.activeIndex);
});

https://swiperjs.com/swiper-api#events

你可以通过引用幻灯片的属性来获取值，像这样：

....
    <div class="swiper-wrapper pb-4" >
      <div class="swiper-slide " id="card-1" data-card-number="12345">
....

更换幻灯片时，参考div匹配轮播的activeIndex:

var activeCard = document.getElementById("card-" + swiper.activeIndex);

现在可以获取卡号：

var cardNumber = activeCard.getAttribute("data-card-number")

如何将其发送到后端取决于您有什么支持。你可能会做类似的事情：

fetch('http://example.com/card?card-number=' + cardNumber)
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson);
  });

https://swiperjs.com/swiper-api 上的文档非常好。请记住在发布到 SO 之前通读文档。

如何知道选择的卡片样式并将值传给后台

How to know the selected card style and pass the value to the backend

javascript

css

php

web