如何在滑块更改和初始条件时获取当前数据滑块？

Question

我创建了一个具有 data-banner 属性的滑块，用于将其数据发送到 Google Analytics。

我要发送给 google analytics 的数据是当前幻灯片的数据。我已经制作了如下脚本，但是 Banner 1 数据在初始状态下没有出现在控制台中。我想要的是第一个数据横幅也出现了。目前正在发生的事情是当滑块变化时，出现横幅数据（最初没有出现）。

谁能帮帮我？

$(document).ready(function(){
$('#carouselExampleSlidesOnly').on('slid.bs.carousel', function () {
    let currentActiveSlide = $('.carousel-item.active');

    if(currentActiveSlide){
            let dataBanner = $(currentActiveSlide).children('.main-banner-item').data('banner')
      let arrayPromotions = [];
      
      arrayPromotions.push({
        "id": dataBanner.id,
        "name": dataBanner.name
      })

      //gtag('event', 'view_promotion', {
      //  "promotions" : arrayPromotions
      //});
      
      console.log(arrayPromotions)
            console.log(dataBanner)
    }

})
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/js/bootstrap.min.js" integrity="sha512-UR25UO94eTnCVwjbXozyeVd6ZqpaAE9naiEUBK/A+QDbfSTQFhPGj5lOR6d8tsgbBk84Ggb5A3EkjsOgPRPcKA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css" integrity="sha512-T584yQ/tdRR5QwOpfvDfVQUidzfgc2339Lc8uBDtcp/wYu80d7jwBgAxbyMh0a9YM9F8N3tdErpFI8iaGx6x5g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="main-banner-item" data-banner='{"id": "1", "name": "Banner 1"}'> 
        Banner 1
      </div>
    </div>
    <div class="carousel-item">
      <div class="main-banner-item" data-banner='{"id": "2", "name": "Banner 2"}'> 
        Banner 2
      </div>
    </div>
    <div class="carousel-item">
      <div class="main-banner-item" data-banner='{"id": "3", "name": "Banner 3"}'> 
        Banner 3
      </div>
    </div>
  </div>
</div>

Answer 1

这段代码可能会解决您的问题。

var arrayPromotions = [];
var firstSlide = $('#carouselExampleSlidesOnly').find(".carousel- item.active .main-banner-item").data("banner"); 
arrayPromotions.push({
  "id": firstSlide.id,
  "name": firstSlide.name
});

是否对您有帮助，请查看。

$(document).ready(function(){
var arrayPromotions = [];
var firstSlide = $('#carouselExampleSlidesOnly').find(".carousel-item.active .main-banner-item").data("banner"); 
arrayPromotions.push({
  "id": firstSlide.id,
  "name": firstSlide.name
});
console.log(arrayPromotions);
console.log(firstSlide);
//gtag('event', 'view_promotion', {
    //  "promotions" : arrayPromotions
//});
$('#carouselExampleSlidesOnly').on('slid.bs.carousel', function () {
    let currentActiveSlide = $('.carousel-item.active');

    if(currentActiveSlide){
            let dataBanner = $(currentActiveSlide).children('.main-banner-item').data('banner')
      let arrayPromotions = [];
      
      arrayPromotions.push({
        "id": dataBanner.id,
        "name": dataBanner.name
      })

      //gtag('event', 'view_promotion', {
      //  "promotions" : arrayPromotions
      //});
      
      console.log(arrayPromotions)
            console.log(dataBanner)
    }

})
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/js/bootstrap.min.js" integrity="sha512-UR25UO94eTnCVwjbXozyeVd6ZqpaAE9naiEUBK/A+QDbfSTQFhPGj5lOR6d8tsgbBk84Ggb5A3EkjsOgPRPcKA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css" integrity="sha512-T584yQ/tdRR5QwOpfvDfVQUidzfgc2339Lc8uBDtcp/wYu80d7jwBgAxbyMh0a9YM9F8N3tdErpFI8iaGx6x5g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="main-banner-item" data-banner='{"id": "1", "name": "Banner 1"}'> 
        Banner 1
      </div>
    </div>
    <div class="carousel-item">
      <div class="main-banner-item" data-banner='{"id": "2", "name": "Banner 2"}'> 
        Banner 2
      </div>
    </div>
    <div class="carousel-item">
      <div class="main-banner-item" data-banner='{"id": "3", "name": "Banner 3"}'> 
        Banner 3
      </div>
    </div>
  </div>
</div>

如何在滑块更改和初始条件时获取当前数据滑块？

How to get current data slider when slider changes and when initial conditions?

javascript

jquery

bootstrap-carousel