我想獲取用戶選擇的單個卡片中的值并將其發布到后端
<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>uj5u.com熱心網友回復：
歡迎 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">
....
換幻燈片時，參考carousel的activeIndex匹配的div：
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 之前徹底閱讀檔案。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/367643.html
標籤：javascript php css 网络
上一篇：分類樹工具和與網站的集成