附加多个单击事件而不必重复自己

Question

Here is the fiddle。 忽略样式，这并不重要。

基本上我需要打开带有两个链接的Fancybox，但我只需要一个图库图像。我觉得这很容易。单击缩略图时会触发li锚点 为了保持画廊分开，我为每个ol做了独特的课程。

我遇到的问题是我会重复自己。 我试图做一个循环（注释掉），但逻辑是我无法掌握的。

附加新点击处理程序的最佳方式是什么（我需要再增加8个）而不用我现在的方式重复自己？我还尝试了一个带有几个参数的函数，但我遇到了e.preventDefault()的问题。

我非常感谢任何指导，谢谢！

Answer 1

这看起来像是一个使用jQuery的on()方法的好用例。 on()是一种方法，允许您在外部容器上建立一个处理程序，该容器可以侦听其子代的单击事件。因此，例如：如果您在列表中指定了.js-listen类，则可以像这样调用on()：

$('.js-listen').on('click', 'other-selector', function(e){
   // function logic with either $(this) or e.target goes here
}

此块基本上会查找具有.js-listen的所有元素，然后当单击具有.js-listen类的元素内的某些内容时，该事件将通过DOM冒泡并且事件将根据到被点击的元素。我有'other-selector'的第二个参数可以是类名，元素或ID。因此，您可以在img处放置一些内容，如果点击的子元素是<img>标记，则会触发事件。

这可以防止您附加一百万次处理程序，on()的一个好处是，如果使用处理程序动态地将元素添加到容器中，您不必担心附加那些元素的处理程序，因为它们再次起泡！

希望这有帮助！