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，因此我并不完全理解用例，但是您可以像这样获得链接的文件扩展名：

"scripts": ["../node_modules/jquery/dist/jquery.min.js" ]

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


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

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

1 个答案: