Fancybox – 将函数应用于多个元素

下面的源代码由Cristiano G. Carvalho在回答问题时发布： 使用其他用户制作的其他链接调用fancybox gallery 。

 Manual Call Fancybox 
     
 
  $(document).ready(function(){ $(".manualfancybox").click(function() { var photos = new Array(); $(".details_gallery_min a").each(function(){ href = $(this).attr("href"); title = $(this).attr("title"); photos.push({'href': href, 'title': title}) }); jQuery.fancybox(photos , { 'transitionIn' : 'elastic', 'easingIn' : 'easeOutBack', 'transitionOut' : 'elastic', 'easingOut' : 'easeInBack', 'opacity' : false, 'titleShow' : true, 'titlePosition' : 'over', 'type' : 'image', 'titleFromAlt' : true } ); }); });  

如果您只有一个画廊（ 示例中为.details_gallery_min ），它可以工作……

我试图改变

 $(".details_gallery_min a").each(function(){ 

至

 $(".galleryone a, .gallerytwo a").each(function(){ 

但它只适用于“.galleryone a”，当我点击调用“gallerytwo”的链接时，它会打开“galleryone”。 我的HTML代码是正确的。

我的问题是：

如果我有多个链接打开不同的画廊并且我想对所有画廊使用相同的行为（过渡，缓和等），该怎么办？

Answer 1

好吧，虽然克里斯蒂亚诺·卡瓦略的回答有效，但我认为这是过分的事情。 array() + .each()方法在内存和性能方面会有（n）（可论证的）高成本，如果你的画廊中有多个图像，则更多。

如果一个简单的fancybox代码和手动事件处理程序可以解决这个问题，我没有看到任何理由迭代每个元素并在数组中构建fancybox库（再次）。 但这完全是我个人的看法。

所以例如，如果你有这样的html：

 
gallery one
 
   ... etc. 
 
gallery two
 
   ...etc.  

重写我自己对同一个问题的答案 ，我会设置我需要的任何手动链接：

 manual call to first gallery manual call to second gallery 

请注意 ，我添加了一个HTML5 data-gallery属性，指示链接所针对data-gallery （ data-gallery值与每个图库的父容器的ID相匹配）

然后，为所有图库添加fancybox代码

 $(".fancybox").fancybox({ // API options here }); 

并将事件处理程序绑定到手动fancybox调用，如：

 $(".manualfancybox").on("click", function(){ var gallery = "#" + $(this).data("gallery"); $(gallery).find(".fancybox").eq(0).click(); return false; }); 

根据图库应从哪个图像开始设置.eq()的值。

请参阅JSFIDDLE

注意 ： .on()需要jQuery .on() +