Question

我创建了以下功能：

//Toggle height of header-foto function
function height_toggler() {
    $('body').toggleClass('large-slider small-slider',500);
    $('#height-toggler').find('i').toggleClass('fa-rotate-270 fa-rotate-90');
}

当用户点击按钮时，我会调用此函数：

// bind the function to a click on the toggler
$('#height-toggler').click( function() {
    height_toggler();
});

这完美无缺，您可以在this page

上看到它

我的客户还希望此功能绑定在Bootstrap Carousel的slide event上，并且仅限于100％高度轮播的页面。我提出了以下代码，但每次旋转木马滑动时都会触发（我理解）。如何在页面加载后仅在第一张幻灯片上触发它？

if( $('body').hasClass('large-slider') ) { //only perform this on large sliders
    $('.carousel').on('slide.bs.carousel', function () {
        height_toggler();
    });
}

Answer 1

您可以使用one()方法。

if( $('body').hasClass('large-slider') ) { //only perform this on large sliders
  $('.carousel').one('slide.bs.carousel', function () {
    height_toggler();
  });
}

Answer 2

如果您希望仅执行一次事件，则可以使用.one()代替.on()

if( $('body').hasClass('large-slider') ) { //only perform this on large sliders
    $('.carousel').one('slide.bs.carousel', function () {
        height_toggler();
    });
}

将jquery函数连接到bootstrap的轮播幻灯片事件

2 个答案: