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

【问题标题】：How to set caption on beforeShow - Fancybox 3如何在 beforeShow 上设置标题 - Fancybox 3
【发布时间】：2020-09-20 14:53:59
【问题描述】：

我面临的问题是我将按钮添加到标题我需要更改按钮取决于我设法做到的操作

        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 ?
    }
  },

【问题讨论】：

标签： javascript jquery fancybox fancybox-3

【解决方案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>' ;
    }
  },

【讨论】：