javascript - 为什么我的JavaScript代码仅在第二次点击时执行？

我现在一直在玩这个。我似乎无法找出为什么灯箱仅在单击两次后才执行。第一次单击，它只是将图像弹出到新选项卡中。

我已经尝试使用e.preventDefault(除了在第一次单击后不使图像在新选项卡中弹出之外，什么都没有做)。

$(document).ready(function() {

    $('a[class^="fomod-"]').on('click', function() {
        var fomodClass = $(this).attr('class');
        var fomodGallery = $('.' + fomodClass).simpleLightbox({
            loop: false
        });
    });

});

我最终要做的是监视DOM，以查看具有“fomod- *”类的链接的任何单击，如果单击该链接，则获取所单击元素的确切类。这样，灯箱就会弹出，并且只显示与图库具有相同类别的其他图像。

最佳答案

问题
.simpleLightbox()初始化灯箱。这意味着您的第一次点击会在页面上添加simpleLightbox，从而允许随后的所有点击真正触发它。

页面加载时需要进行初始化。现在您可以做类似...

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

但是有一些缺点。

不会找到fomod不是第一类的元素，即class="other-class fomod-one"。

如果您有class="fomod-one other-class"，则内部选择器将不起作用，因为串联将导致$(".fomod-one other-class")。

您将反复在相同的元素上不断地重新初始化simpleLightbox，但我不确定该插件是否已设置为可以处理。

解决方案1-数据属性
data属性使我们在选择元素时更具灵活性。此外， Vanilla JS(使用 data )和jQuery(使用 dataset )都支持在JavaScript中获取.data()属性。

<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})}
    }, {});

});

与初始方法相比，此方法为我们提供了三件事:

它不限制类的使用。

仅将simpleLightbox附加到每个画廊一次。

它将名称单独存储在galleries对象中。例如，如果您想告诉Gallery1转到下一张幻灯片，则可以执行galleries["Gallery1"].next()。

解决方案2-更适当地使用类

正如您在评论中提到的那样，您的环境没有为data-属性提供强大的支持。相反，我们可以使用类，我们只需要更加体贴即可。在这里，我将使用两个类-一个将其标记为灯箱元素("fomod")，另一个将关联画廊("fomod-GalleryName")。

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

(可以通过多种方法来解决，但这会打开一 jar 蠕虫。)

这种方法虽然涉及的程度稍微多一点，但可以实现与数据属性解决方案相同的所有好处。

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

无评论

$(document).ready(function() {
  const galleries = $(".fomod")
    .get()
    .reduce((output, elem) => {
      let galleryName = [...elem.classList].find(c => c.startsWith('fomod-'));
      if (!galleryName) return;
      galleryName = galleryName.split("-")[1];

      return output[galleryName]
        ? output
        : { ...output, [galleryName]: $(`.fomod-${galleryName}`).simpleLightbox({loop: false})}
    }, {});
});

有评论

   $(document).ready(function() {

      const galleries = $(".fomod")

        //Get array from elements
        .get()

        //For each fomod element...
        .reduce((output, elem) => {

          //Get the classes on this element, and find one that starts with "fomod-"
          let galleryName = [...elem.classList].find(c => c.startsWith('fomod-'));

          //Didn't find one. Skip this element
          if (!galleryName) return;

          //Remove the "fomod-" part so we're left with just the gallery name
          galleryName = galleryName.split("-")[1];

          //Have we already initialized this gallery?
          return output[galleryName]

            //Yup. Do nothing.
            ? output

            //Nope. Initialize it now.
            : { ...output, [galleryName]:  $(`.fomod-${galleryName}`).simpleLightbox({loop: false})}

        }, {});

    });