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

Question

我一直在玩弄这个。我似乎无法找出为什么灯箱仅在我单击两次后才执行。第一次点击时，它只是在新标签页中弹出图像。

我已经尝试过使用 e.preventDefault(它除了阻止图像在第一次点击后在新标签页中弹出之外什么也没做)。

$(document).ready(function() {

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

});

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

Answer 1

问题

.simpleLightbox() 初始化灯箱。这意味着您的第一次点击会将 simpleLightbox 添加到您的页面，允许所有后续点击真正触发它。

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

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

但是这有一些缺点。

1. 它不会找到 fomod 不是第一类的元素，即 class="other-class fomod-one"。
2. 如果您有 class="fomod-one other-class"，您的内部选择器将无法工作，因为串联会导致 $(".fomod-one other-class ").
3. 您会不断地在相同的元素上重复初始化 simpleLightbox，我不确定插件是否设置为可以处理。

---

解决方案 1 - 数据属性

data 属性让我们可以更灵活地选择元素。此外，vanilla JS(使用 dataset )和 jQuery(使用 .data() )都支持在 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})}
    }, {});

});

与初始方法相比，这种方法为我们提供了三样东西:

1. 它不限制类的使用。
2. 它将simpleLightbox 附加到每个图库一次。
3. 它按名称将画廊单独存储在 galleries 对象中。例如，如果您想告诉 Gallery1 转到下一张幻灯片，您可以执行 galleries["Gallery1"].next()。

---

解决方案2——更恰本地使用类

正如您在评论中提到的，您的环境没有为 data- 属性提供很好的支持。相反，我们可以使用类，我们只需要多考虑一点。我将在此处使用两个类 - 一个将其标记为灯箱元素 ("fomod")，另一个用于关联画廊 ("fomod-GalleryName")。

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

^{(有很多方法可以解决这个问题，但这会带来麻烦。)}

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

<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})}

        }, {});

    });