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

Posted 2023-05-09

【中文标题】Fancybox：在列表中添加每个相关的 html 内容

【英文标题】：Fancybox: Prepend each relative html content from a list

【发布时间】：2014-04-13 12:09:05

【问题描述】：

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

<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 和 $(this) 进行了一些尝试，但无济于事。

有什么建议吗？

谢谢

【问题讨论】：

什么问题，没搞清楚

@PratikJoshi，问题是无论您点击哪个链接，列表中第一项的 .fancyShareButtons div 内容都只会放在前面。即：我点击“文档C”，我得到“爱我”而不是“实际上是你想要的我”。我点击“文档 B”，得到的是“爱我”，而不是“不，爱我”。

还是不明白，用jsfiddle

【参考方案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();
        ,

    );