javascript - Fancybox 不会使用通过 javascript 传递的内容

Question

使用 jquery 1.10.2，fancybox 2.1.5

我试图通过 javascript 向 fancybox 传递“内容:数据”，但它不起作用。然而，如果我 console.log 数据变量，它会显示有效的 HTML/文本，但 fancybox 拒绝使用它。

<div class="item">
<h4 class="choice">launch modal</h4>
<div class="detail">
This should show up in my <b>fancybox</b>!
</div><!--.detail-->
</div><!--.item-->

$('.choice').each(function(i, elem){
    $(elem).siblings('.detail').wrap('<div style="display:none"></div>');
});

$(".choice").fancybox({
    maxWidth: 800,
    content: 'replace this text',
    beforeShow: function(){
        var title = $(this.element).text();
        var data = $(this.element).parent().find('.detail').html();
        console.log('this=' + this + ' | title=' + title + ' | data=' + data);//DEBUG
        this.content = data;
    }
});

console log明明是拿到了data html内容，但是fancybox拒绝使用。我已经将它包装在另一个带有 display:none 的 div 中，因为他们的网站说无论出于何种原因都要这样做。

Answer 1

要在回调中构建您的内容，请改用 afterLoad，否则 content 选项将优先于 this.content回调:

$(".choice").fancybox({
    maxWidth: 800,
    content: 'replace this text',
    afterLoad: function () {
        var title = $(this.element).text();
        var data = $(this.element).parent().find('.detail').html();
        console.log('this=' + this + ' | title=' + title + ' | data=' + data); //DEBUG
        this.content = data;
    }
});

参见 JSFIDDLE

注意:您还可以构建/替换上面代码中的title，例如this.title = title;