获取 Href 链接；如果要跳过 JPG

Question

我为我的网站创建了一个加载器（整个前端都是自定义的，所以现在我可以编辑大约 95% 的所有内容，除了 woocommerce 插件）。超级简单的一个，它遵循这个逻辑，如果锚是 # 或页面本身，它不会做任何事情（这是我想要的）但是生成我的图片库的 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 标签是否以 an 结尾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

             }

    }