为什么我的JavaScript代码只在第二次单击时执行？

我现在一直在玩弄这个。我似乎不明白为什么lightbox只有在我点击两次之后才会执行。第一次点击，它只是弹出一个新的标签图像

我已经尝试过使用e.preventDefault（它除了防止图像在第一次单击后在新选项卡中弹出外，什么都没做）

我最终要做的是观察DOM中是否有对具有“fomod-*”类的链接的任何单击，如果单击，则获得所单击元素的确切类。这样，灯箱就会弹出，只显示与画廊级别相同的其他图像。

问题

.simpleLightbox（）

初始化灯箱。这意味着您的第一次单击会将

simpleLightbox

添加到您的页面中，从而允许所有后续单击实际触发它

您需要在页面加载时进行初始化。现在你可以做一些像

$('a[class^="fomod-"]').each(function() { ... })

但这有一些缺点

它不会找到

fomod

不是第一类的元素，即

class=“其他类fomod one”

如果您有

class=“fomod one other class”

，您的内部选择器将无法工作，因为串联将导致

$（“.fomod one other class”）

您将在相同的元素上反复不断地重新初始化

simpleLightbox

，我不确定插件是否设置为处理

---

解决方案1-数据属性

数据

属性允许我们在选择元素时有更大的灵活性。此外，vanilla JS（使用）和jQuery（使用）都支持在JavaScript中获取

数据
属性

与初始方法相比，该方法为我们提供了三个方面：

它不限制类的使用
它只将
simpleLightbox
附加到每个库中一次
它在
库
对象中按名称分别存储库。例如，如果您想让
Gallery1
转到下一张幻灯片，可以执行
Gallery1[“Gallery1”].next（）

解决方案2-更恰当地使用类
正如您在评论中提到的，您的环境没有为
数据-
属性提供很好的支持。相反，我们可以使用课堂，我们只需要更体贴一点。这里我将使用两个类—一个将其标记为lightbox元素（
“fomod”
），另一个用于关联库（
“fomod GalleryName”
）

您可能想知道为什么需要使用“flag”
fomod
类。为什么不直接使用
fomod-
并使用
^=
选择器呢？如上所述，如果
fomod-
是
my other class
之后的第二个类呢？选择器找不到该元素

（有很多方法可以解决这个问题，但这只是打开了一个蠕虫罐头。）

这种方法虽然稍微复杂一点，但实现了与数据属性解决方案相同的所有好处

<a class="fomod fomod-Gallery1"></a>
<a class="fomod fomod-Gallery1"></a>
<a class="fomod fomod-Gallery2"></a>

Try:
$（document.body）.on（'click'，'a[class^=“fomod-”]），function（）{}
你能在JSFIDLE上创建一个演示来复制这个问题吗，或者在stackoverflow上使用内置的代码片段吗？这就成功了。我不知道你们是怎么做的，这些东西让我很困惑，尤其是在常量、let和数组等方面。有很多东西需要学习。再次，非常感谢你们的时间！@theMavric，你们懂了。我要补充一句为了完整起见，请对我的代码进行注释。
<a data-fomod="Gallery1"></a>
<a data-fomod="Gallery1"></a>
<a data-fomod="Gallery2"></a>

$(document).ready(function() {

  const galleries = $("[data-fomod]")
    //Get array from elements
    .get()
    //Attach lightbox to each unique gallery on the page
    .reduce((output, {dataset}) => {
      let galleryName = dataset.fomod;
      return output[galleryName] 
        ? output 
        : {...output, [galleryName]: $(`[data-fomod="${galleryName}"]`).simpleLightbox({loop: false})}
    }, {});

});

<a class="fomod fomod-Gallery1"></a>
<a class="fomod fomod-Gallery1"></a>
<a class="fomod fomod-Gallery2"></a>