Question

我正在尝试在活动的引导程序4转盘幻灯片2号（位置）上调用新的countUp.js对象。
我知道幻灯片更改（完成）后如何开始活动，例如：$('#myCarousel').on('slid.bs.carousel', function () {...}

像这里记录的那样：Bootstrap Carousel 但是我怎么只能仅调用第二张幻灯片上的对象（方法）？

Answer 1

这是易于编辑的解决方案

let currentId = 0, 
    seekedId = 3;
$('.carousel-item').each(function(){
    if(currentId == seekedId){
        $(this).on('slid.bs.carousel', function(){
            console.log('only on 3rd element');
        });
    }else{
        currentId += 1;
    }
});

使用jquery eq：

$('.carousel-item:eq( 2 )').on('slid.bs.carousel', function(){
    console.log('3rd element do something');
});

Answer 2

来回往复后，我发现我错过了relatedTarget.id，所以我使用了这个switch语句来完成它，我相信上面的答案也有办法，但这对我有用：

$('#startPageCarousel').on('slide.bs.carousel', function (ev) {
  var id = ev.relatedTarget.id; // needed to get the id of the element
  switch (id) {
    case "3":
      // do something the id is 3
      var options = {
        useEasing: true,
        useGrouping: true,
        separator: ',',
        decimal: '.',
      };
      var stat1 = new CountUp('stats1', 0, numberOfPosts, 0, 5.5, options);
      var stat2 = new CountUp('stats2', 0, numberOfPosts, 0, 5.5, options);
      var stat3 = new CountUp('stats3', 0, numberOfPosts, 0, 5.5, options);
      var stat4 = new CountUp('stats4', 0, numberOfPosts, 0, 5.5, options);

      if (!stat1.error && !stat2.error && !stat3.error && !stat4.error) {
        stat1.start();
        stat2.start();
        stat3.start();
        stat4.start();
      }
      break;
  }
});

如何访问轮播bootstrap4活动幻灯片以初始化事件

2 个答案: