Question

我一直在研究客户网站的原型，我遇到了一个相当重要的障碍。 You can view the prototype here

正如您所看到的，它的工作方式是您可以水平滚动一组幻灯片，然后通过单击一个，打开包含更多幻灯片的堆栈。如果您再次单击该堆栈中的图像，则会打开一个灯箱。单击另一个堆栈或关闭按钮将关闭该堆栈（并打开另一个堆栈，视情况而定）。

一切都很好。但是，如果您执行以下操作，则会出现一些奇怪的行为：

点击打开任何堆栈。
单击打开图像的灯箱（如果单击与主列表关联的图像，则效果最佳）。
通过单击关闭按钮或单击另一个堆栈来关闭灯箱和堆栈。
点击返回第一个堆栈。您可以获得灯箱，而不是重新打开堆栈。

这让我感到困惑，因为只有在包含UL的类时才会调用灯箱，并且在灯箱关闭时删除该类。我已经检查并仔细检查了这一点，它肯定是缺失的。

以下是各自的功能：

$("ul.hide a.lightbox").live("click",function(){
    $("ul.show").removeClass("show").addClass("hide");
    $(this).parent().parent().removeClass("hide").addClass("show");
    $("ul.hide").animate({opacity: 0.2});
    $("ul.show").animate({opacity: 1});
    $("#next").animate({opacity: 0.2});
    $("#prev").animate({opacity: 0.2});
    return false;
});

$("ul.show a.lightbox").live("click",function(){
    $(this).fancybox().trigger("click");
    return false;
});

正如您所看到的，为了调用灯箱，包含UL 的具有show类。但是，如果您使用Firebug进行检查，则不会。

对于那些好奇的人，添加的.trigger("click");是因为灯箱需要双击才能启动。

知道如何解决这个问题吗？

Answer 1

我认为问题在于，只要您添加click类，show事件就会被附加，但是一旦删除它就不会被绑定。

我会说做这样的事情会更好：

$("ul a.lightbox").click(function(){
  if( $(this).parent().is(".show") ){
    $(this).fancybox().trigger("click");
  }
  return false;
});

Answer 2

啊，我明白了。特别感谢 Seb 让我朝着正确的方向前进。我添加了一个unbind()函数，只要您单击关闭堆栈或单击另一个堆栈，就会调用该函数。它可能有点脏，但每次打开和关闭堆栈时事件都是绑定和解除绑定。

我会更新原型以反映我的更改。谢谢你的帮助！

Answer 3

在您使用触发器之后，最好的选择是.unbind('click')（因为.fancybox()在链接see line 771 here）上附加直接click事件处理程序，如下所示：

$("ul.show a.lightbox").live("click",function(){
  $(this).fancybox().trigger('click').unbind('click');
  return false;
});

不满足选择器时调用jQuery操作？

3 个答案: