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

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);