Question

我正在尝试将一些html内容添加到fancybox iframe模式中。有问题的页面有一个文档列表，每个文档都有自己的额外html内容，可以传递给fancybox模式：

<div class="doc">
  <a href="some_documentA.pdf" class="fancyDoc" data-fancybox-type="iframe">Document A</a>
  <div class="fancyShareButtons" style="display: none;"><a>Love me</a></div>
</div>
<div class="doc">
  <a href="some_documentB.pdf" class="fancyDoc" data-fancybox-type="iframe">Document B</a>
  <div class="fancyShareButtons" style="display: none;"><a>No, love me</a></div>
</div>
<div class="doc">
  <a href="some_documentC.pdf" class="fancyDoc" data-fancybox-type="iframe">Document C</a>
  <div class="fancyShareButtons" style="display: none;"><a>Actually, its me you want</a></div>
</div>

我遵循了previous post的建议，并根据我的需要稍作修改：

$(".fancyDoc").click(function() {
 $.fancybox({
    fitToView   : false,
    width       : '90%',
    height      : '90%',
    autoSize    : false,
    openEffect  : 'none',
    closeEffect : 'none',
    closeClick : true,
    afterShow: function(){
       var shareLinks = "<div class='fancyTools clearfix'>" + $(".fancyShareButtons").html() + "</div>";
      $('.fancybox-inner').prepend(shareLinks);
},

    afterClose: function(){
     $(".fancybox-inner .fancyTools").remove();
    },

});

问题是只有第一个文档中隐藏的.fancyShareButtons div的内容才会被添加到所有列出的文档中。显然，我需要为每个链接的文档指定我想要预先添加其相对内容。

我用each.function和$（这个）刺了一下但是没有用。

任何指针？

由于

Answer 1

尝试这样的事情

$(".fancyDoc").click(function() {
    var that = $(this);
     $.fancybox({
        fitToView   : false,
        width       : '90%',
        height      : '90%',
        autoSize    : false,
        openEffect  : 'none',
        closeEffect : 'none',
        closeClick : true,
        afterShow: function(){
           var shareLinks = "<div class='fancyTools clearfix'>" + that.next("div.fancyShareButtons").html() + "</div>";
          $('.fancybox-inner').prepend(shareLinks);
    },

        afterClose: function(){
         $(".fancybox-inner .fancyTools").remove();
        },

    });

Fancybox：在列表中添加每个相对html内容

1 个答案: