Question

我已将按钮添加到colorbox并将点击事件绑定到它们，这部分正常。其中一个按钮应该从Colorbox数组中删除当前显示的图像，如果有任何按钮，则前进到下一个。

到目前为止我尝试了什么：

1）

$(document).ready( function(){
cboxLinks = $('a.colorbox').colorbox(cboxOpts);

$('body').on('click', 'a.remove-from-favorites', function(){
    // 'a.remove-from-favorites' is appended to colorbox div.
    cboxLinks.splice(0,1); // remove first element from cboxLinks collection.
    $.colorbox.next(); // fails
})
}

2）

$(document).ready( function(){
cboxLinks = $('a.colorbox').colorbox(cboxOpts);

$('body').on('click', 'a.remove-from-favorites', function(){
    // 'a.remove-from-favorites' is appended to colorbox div.
    $('a.colorbox#id').remove(); // remove element from DOM.
    $.colorbox.next(); // fails
})
}

当我调用$ .colorbox.next（）时，当前图片消失，只显示叠加，除了刷新页面外我什么也做不了。

我怎样才能做到这一点？

Answer 1

我的解决方案。不是最优雅的方式，但它对我有用。

$('body').on('click', 'a.remove-from-favorites', function(){
    // 'a.remove-from-favorites' is appended to colorbox div.
    toremove = $('a.colorbox#id');
    target = ( toremove.next().length ) ? toremove.next() : ( toremove.prev().length )? toremove.prev() : false;
    toremove.remove();

    if (target) {
        target.find('a.ims-colorbox').trigger('click');
    } else {
        $.colorbox.close();
    }
});

用几句话说：

确定下一个要显示的图片是否为左侧。
从DOM中删除当前图片的链接。
在下一张图片的链接上触发“点击”事件，如果没有图片则关闭彩色框。

如果您找到更好的解决方案，请告诉我。

Answer 2

如果cboxLinks是jQuery对象的集合，请尝试使用slice()代替splice()：

cboxLinks.slice(0,1);

Colorbox打开时，动态地从Colorbox中删除图像

2 个答案: