jquery - 使用 malsup Cycle 更换幻灯片后触发警报

Question

我正在使用 Malsup 的 jQuery Cycle 插件，并有以下代码可以很好地运行它，并将 .current 类添加到活动的幻灯片中。

$('#banner') 
    .cycle({ 
    fx: 'fade', 
    speed: '1000', 
    timeout: '8000', 
    pager: '#pager',
    next: '#next',
    prev: '#prev',
    cleartypeNoBg: 'true',
    before: function(){
       $(this).parent().find('.current').removeClass();
    },
    after: function(){
       $(this).addClass('current');
    }
});

现在我想做的（为了测试代码）是在 .current 类更改幻灯片时触发警报。我努力了：

$('#banner').find('.current').change(function(){
    alert('hello');
});

但它根本没有用，我做错了什么？

Answer 1

.change()仅适用于inputsor contenteditable。类更改时不会触发事件。你必须创建你自己的。

$('#banner') 
    .cycle({ 
    fx: 'fade', 
    speed: '1000', 
    timeout: '8000', 
    pager: '#pager',
    next: '#next',
    prev: '#prev',
    cleartypeNoBg: 'true',
    before: function(){
       $(this).parent().find('.current').removeClass();
    },
    after: function(){
       $(this).addClass('current').trigger('changeClass');
    }
});

然后你做

$('#banner').on('changeClass', function(){
   alert($(this).find('.current').index());
})