如何在 beforeShow 上设置标题 - Fancybox 3

Question

我遇到了一个问题，我将按钮添加到标题中，我需要更改按钮，具体取决于我设法用

完成的操作

        caption : function( instance, item ) {
              var id = item.opts.$orig.attr("data-id");
              var caption = $(this).data('caption') || '';

              if ( item.type === 'image' ) {

                if (item.opts.$orig.prop("class") == 'selected') {
                  caption = (caption.length ? caption + '<br />' : '') + '<button class="btn btn-success remove-color" data-name="'+item.opts.$orig.attr("data-name")+'" data-id="'+item.opts.$orig.attr("data-id")+'"> Remove</button>' ;
                }else {
                  caption = (caption.length ? caption + '<br />' : '') + '<button class="btn btn-success add-color" data-name="'+item.opts.$orig.attr("data-name")+'" data-id="'+item.opts.$orig.attr("data-id")+'"> Add</button>' ;

                }
              }
              return caption;
          }




// later in the code
$(document).on('click', '.add-color', function(e){
...................
.............

   $('.color-thumb-wrapper').find('a[data-id="'+id+'"]').addClass('selected');

.............
.......

});

// this part working correct

但是当图像打开并且工作正常时这只会触发一次如果我关闭并再次打开图像一切正常我有按钮删除

当我单击按钮并滑动下一张和上一张图像时，问题就出现了，然后我总是得到按钮添加我尝试使用 beforeShow 但如何更改 beforeshow 的标题？

 // This code working correct
 beforeShow: function( instance, current ) {

   if (current.opts.$orig.prop("class") == 'selected') {
       console.log('correct');

      // how to change caption here ?
    }
  },

Answer 1

我用

完成了

this.opts.caption =

  beforeShow: function( instance, current ) {

   if (current.opts.$orig.prop("class") == 'selected') {
       this.opts.caption = '<button class="btn btn-success remove-color" data-name="'+this.opts.$orig.attr("data-name")+'" data-id="'+this.opts.$orig.attr("data-id")+'"> Премахни </button>' ;
    }
  },

如何在 beforeShow 上设置标题 - Fancybox 3

How to set caption on beforeShow - Fancybox 3

javascript

jquery

fancybox

fancybox-3