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

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

在不使事情复杂化的情况下，您可以使用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()获得相同的结果...查看 更新的 JSFIDDLE

Answer 2

感谢 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 3

假设这是同一个插件。

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

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

所以你只需要在初始化fancybox之前调用函数（或设置一个内容变量）；

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