Question

我正在使用featherlight.js作为图片库，并将此代码用于字幕：

$.featherlightGallery.prototype.afterContent = function() {
  var caption = this.$currentTarget.find('img').attr('alt');
  this.$instance.find('.caption').remove();
  $('<div class="caption">').text(caption).appendTo(this.$instance.find('.featherlight-content'));
};

现在客户想要添加第二个标题，其中仅包含图库右侧的版权信息。是否有可能有两个标题，一个名为.caption，第二个可能是.copyright？

我已经尝试过使用“data-caption =”和上面js-initial的简单副本，但它失败了。

任何想法？先谢谢你，圣诞快乐！

Answer 1

您可以使用数据属性。

$.featherlightGallery.prototype.afterContent = function() {
  var caption = this.$currentTarget.find('img').attr('alt');
  this.$instance.find('.caption').remove();
  $('<div class="caption">').text(caption).appendTo(this.$instance.find('.featherlight-content'));

  var copyright = this.$currentTarget.find('img').data('copyright');
  this.$instance.find('.copyright').remove();
  $('<div class="copyright">').text(copyright).appendTo(this.$instance.find('.featherlight-content'));
};

然后在你的标记中添加

<img src="..." alt="my caption text" data-copyright="my copyright text">

和你的css

.copyright {
  float: right;
}

或适合的东西。

如果您需要它是有条件的，您可以检查data-copyright属性的定义和/或长度。

羽毛灯不止一个标题？

1 个答案: