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;
    }
});

控制台日志清楚地表明它获得了数据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;

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

1 个答案: