在“颜色盒”处于打开状态时，动态地从“颜色框”中删除图像

Remove images from Colorbox dynamically, while Colorbox is open

本文关键字：颜色 颜色框 图像 删除 动态 颜色盒 于打开 状态      更新时间：2023-09-26

我已经将按钮附加到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（）时，当前图片消失，只显示覆盖，除了刷新页面外，我什么都做不了。

我怎样才能做到这一点？

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

$('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中删除指向当前图片的链接
  • 在下一张图片的链接上触发"点击"事件，如果没有图片，则关闭颜色框

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

如果cboxLinks是jQuery对象的集合，请尝试使用slice()而不是splice():

cboxLinks.slice(0,1);
相关文章：