获取 Href Link;如果 JPG 跳过

Question

我已经为我的网站创建了一个加载器（整个前端是自定义的，所以现在我可以编辑我拥有的大约 95% 的东西，除了 woocommerce 插件）。超级简单，它遵循这个逻辑，如果锚点是 # 或页面本身它不会做任何事情（这是我想要的）但是生成我的图片库的 woocommerce 插件是一个 link 而不是页面本身或#。这意味着我需要收集扩展名的路径名，如果它以 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 结尾以跳过而不执行动画并将 link 视为动画不存在。

Answer 1

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


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

获取 Href Link;如果 JPG 跳过

Get Href Link; if JPG to skip

javascript

transition