获取 Href 链接；如果 JPG 跳过

Question

我已经为我的网站创建了一个加载器（整个前端都是自定义的，所以现在我可以编辑除了 woocommerce 插件之外的所有内容的大约 95%）。 超级简单的一个，它遵循这个逻辑，如果锚是一个 # 或页面本身它不会做任何事情（这是我想要的）但是生成我的图片库的 woocommerce 插件是一个不是页面本身的链接或一种 ＃。这意味着我需要收集扩展名的路径名，如果它以 jpg png 或任何图像文件结束，则继续；并跳过动画的其余部分，让插件运行它的过程。

我在 woocommerce 中使用了 Barba JS、SWUP 和其他动画，这是唯一一个不会中断或有这么多条件的 woocommerce。

function fadeInPage() {
    if (!window.AnimationEvent) { return; }
    var fader = document.getElementById('fader');
    fader.classList.add('fade-out');
  }

  document.addEventListener('DOMContentLoaded', function() {
    if (!window.AnimationEvent) { return }

    var anchors = document.getElementsByTagName('a'); 


******* for (var idx = 0; idx < anchors.length; idx += 1) {
      if (anchors[idx].hostname !== window.location.hostname || anchors[idx].pathname === window.location.pathname) *******

{

        continue;
      }
      anchors[idx].addEventListener('click', function(event) {

        var fader = document.getElementById('fader'),
            anchor = event.currentTarget;

        var listener = function() {



          window.location = anchor.href;
          fader.removeEventListener('animationend', listener);
        };
        fader.addEventListener('animationend', listener);

        event.preventDefault();
        fader.classList.add('fade-in');
      });
    }
  });

  window.addEventListener('pageshow', function (event) {
    if (!event.persisted) {
      return;
    }
    var fader = document.getElementById('fader');
    fader.classList.remove('fade-in');
  });

我加注了我需要更改的内容。动画有效，页面过渡有效。我需要动画来识别 a 标签是否以 jpg 或 png 结尾以跳过而不执行动画并将链接视为动画不存在。

Answer 1

从未使用过 woocommerce，所以我不完全了解用例，但您可以像这样获取链接的文件扩展名：

    for (var idx = 0; idx < anchors.length; idx += 1) {
           let fileType = anchors[idx].href.split('.').pop();
           //Do whatever
    }

或者，如果您想将其与预设的扩​​展列表进行比较，您可以使用正则表达式：

    for (var idx = 0; idx < anchors.length; idx += 1) {
           if (anchors[idx].href.match(/\.(jpg|png)$/)) {
               //Do whatever
             }
    }