Javascript Fancybox：使用jQuery的each（）创建一组照片

在standart案例中，我们可以通过执行以下操作创建照片库（照片组）：

$( '.fancybox' ).fancybox();

在HTML中，我们必须将标记“a”的属性rel设置为相同的值：

<a rel="group" title="" href="/profile/photos/files/74.jpeg" class="fancybox no-tooltip" id="photo-link-74"><img class="image-curving" style="display: block;" alt="" src="/profile/photos/files/74_thumb.jpeg"></a>
<a rel="group" title="" href="/profile/photos/files/74.jpeg" class="fancybox no-tooltip" id="photo-link-74"><img class="image-curving" style="display: block;" alt="" src="/profile/photos/files/74_thumb.jpeg"></a>

当我们想使用jQuery的每个（）时，情况如何

        $(".fancybox").each(    
            function()
            {
                var parentId = $( this ).parent().parent().attr( 'id' );
                var id = parentId.substring( parentId.indexOf( '-' ) + 1, parentId.length );

                $( this ).fancybox(
                    {
                        minWidth: 600,
                        afterShow: function() { afterShow( id ); },
                        title: "<img href='/pics/indikator.gif'>",
                        helpers: 
                        {
                            title: 
                            {
                                type : 'inside'
                            }
                        }
                    }
                );
            }
        );

$（“.fancybox”）。每个（
函数（）
{
var parentId=$（this.parent（）.parent（）.attr（'id'）；
var id=parentId.substring（parentId.indexOf（'-'）+1，parentId.length）；
$（此）。fancybox(
{
最小宽度：600，
afterShow:function（）{afterShow（id）；}，
标题：“，
助手：
{
标题：
{
类型：“内部”
}
}
}
);
}
);

---

在最后一种情况下，照片将不会分组。如何处理函数

each（）

并对rel属性相同的所有照片进行分组？

下一个不是通用的，但在页面上有一个图库时有效：

        var ids = [];
        var index = 0;

        $( '.fancybox' ).each(
            function()
            {
                var parentId = $( this ).parent().parent().attr( 'id' );
                var id = parentId.substring( parentId.indexOf( '-' ) + 1, parentId.length );
                ids[ index ] = id;
                index++;
            }
        );

        $( ".fancybox" ).fancybox(
            {
                minWidth: 600,
                afterShow: function() { afterShow( ids[ $.fancybox.current.index ] ); },
                title: "<img href='/pics/indikator.gif'>",
                helpers: 
                {
                    title: 
                    {
                        type : 'inside'
                    }
                }
            }               
        );

varids=[]；
var指数=0；
$（'.fancybox'）。每个(
函数（）
{
var parentId=$（this.parent（）.parent（）.attr（'id'）；
var id=parentId.substring（parentId.indexOf（'-'）+1，parentId.length）；
id[index]=id；
索引++；
}
);
$（“.fancybox”）.fancybox(
{
最小宽度：600，
afterShow:function（）{afterShow（id[$.fancybox.current.index]）；}，
标题：“，
助手：
{
标题：
{
类型：“内部”
}
}
}               
);

感谢Asad，他给了我迭代的想法

如果有人有更明确的决定（没有外部变量，但只使用闭包变量），请在此处发布。

您不需要

each（）

，只需在常规fancybox自定义脚本中动态获取父级的

id

，使用fancybox回调，如

$(".fancybox").fancybox({
   afterShow: function(){
       var parentId = $(this.element).parent().parent().attr('id');
       // do something with that variable
   }
});

---

注意我使用了

$（this.element）

，因为这是在fancybox回调中引用

$（this）

的方法。您还可以在脚本顶部声明所有变量，以便随时访问它们。

为什么要使用

每个
？只需对所有元素进行迭代，给它们一个
rel
属性来对它们进行分组，然后调用fancybox一次。@Asad我想使用闭包变量parentId和id。我不知道你的方法是否可行。你认为有可能吗？@Asad谢谢你提出迭代的想法。
afterShow:function（）{afterShow（id）；}
做什么。。。使用
each（）
背后的想法是什么？我认为这是多余的。那么您不需要
each（）
，只需在常规fancybox自定义脚本中动态获取父级的
id
，使用类似
afterShow:function（）{$（this.element）.parent（）.parent（）.attr（'id'）；}
。。。注意，我使用了
$（this.element）
，因为这是在fancybox回调中引用
$（this）
的方法