Question

参数content的值应该是获取内容的函数。我以为我可以使用这样的东西：

$(".fancy-detail-page").fancybox({
      'content'    : function(){
          var id = $(this).attr('id');
          id = id.replace("pd", "c");
          var content = $('#' + id + ' .product-details').html();
          return content;
      },
      'padding'    : 0,
      'openEffect'  : 'none',
      'closeEffect'  : 'none',
      'maxWidth'    : 960
 });

但是return似乎不起作用。这是怎么做到的？

Answer 1

感谢jqueryrocks和烤。这个解决方案对我有用：

  $(".fancy-detail-page").click(function(e){
    e.preventDefault();
    var id = $(this).attr('id');
    $.fancybox({
      'content'    : (function(){
        id = id.replace("pd", "c");
        var content = $('#' + id + ' .product-details').html();
        return content;
      })(),
      'padding'    : 0,
      'openEffect'  : 'none',
      'closeEffect'  : 'none',
      'maxWidth'    : 960
    });
   });

Answer 2

如果没有太多复杂的事情，你可以使用beforeLoad回调来获得相同的结果，它会更清晰，更简单，更快速：

$(".fancy-detail-page").fancybox({
    padding: 0,
    openEffect: 'none',
    closeEffect: 'none',
    maxWidth: 960,
    beforeLoad : function () {
        var id = $(this.element).attr("id").replace("pd", "c");
        this.content = $('#' + id + ' .product-details').html();
    }
});

<强> JSFIDDLE

和这一行

this.content = $('#' + id + ' .product-details').html();

可以简化为

this.content = $('#' + id + ' .product-details');

无需.html()即可获得相同的结果...请参阅的 updated JSFIDDLE

Answer 3

假设这是相同的插件。

每个API看起来像'内容'必须是数据。

“内容强制内容（可以是任何HTML数据）” http://fancybox.net/api

所以你只需要在初始化fancybox之前调用函数（或设置内容var）;

var id = $(this).attr('id');
id = id.replace("pd", "c");
var content = $('#' + id + ' .product-details').html();

$(".fancy-detail-page").fancybox({
      'content'    : content,
      'padding'    : 0,
      'openEffect'  : 'none',
      'closeEffect'  : 'none',
      'maxWidth'    : 960
 });

从函数返回值作为jQuery中参数的值

3 个答案: