0

我是 Swup js 的新用户。将近 2 天的时间来研究和测试 JS 加载问题。我正在尝试使用 Swup JS 在我的网站上实现 Preload JS 插件。我需要在特定页面上固定一个元素。刷新页面工作时，但是如果我更改页面然后返回，Preload JS似乎无法识别元素的JS。仅当我刷新页面时，固定才有效。我已经在 Swup js Repo 中看到了很多问题。但我的问题仍然存在。

let options = {
    linkSelector: '.nav-list a:not([data-no-swup]) , a:not([data-no-swup])',
    animateHistoryBrowsing: true,
    animationSelector: '[class*="transition-"]',
    containers: ['#maan-dynamic-content', '#maan-dynamic-footer', '#maan-dynamic-menu'],
    plugins: [
      new SwupPreloadPlugin(),
      new SwupOverlayTheme({
        color: '#F88808',
        duration: 600,
        direction: 'to-right',
      })
    ],
  };

  init();

  const swup = new Swup(options);

  swup.on('contentReplaced', init);
  swup.on('willReplaceContent', unload);

函数初始化

function init() {
// init Isotope
    if (document.querySelectorAll('.grid').length) {
      var $grid = $('.grid').isotope({
        itemSelector: '.grid-item',
        gutter: 30
    });

      // store filter for each group
      var filters = {};

      $('.filters').on('change', function (event) {
        var $select = $(event.target);
        // get group key
        var filterGroup = $select.attr('value-group');
        // set filter for group
        filters[filterGroup] = event.target.value;
        // combine filters
        var filterValue = concatValues(filters);
        // set filter for Isotope
        $grid.isotope({ filter: filterValue });
      });

      // flatten object by concatting values
      function concatValues(obj) {
        var value = '';
        for (var prop in obj) {
          value += obj[prop];
        }
        return value;
      }

      //****************************
      // Isotope Load more button
      //****************************
      var initShow = 6; //number of items loaded on init & onclick load more button
      var counter = 3; //counter for load more button
      var iso = $grid.data('isotope'); // get Isotope instance

      loadMore(initShow); //execute function onload

      function loadMore(toShow) {
        $grid.find(".hidden").removeClass("hidden");

        var hiddenElems = iso.filteredItems.slice(toShow, iso.filteredItems.length).map(function (item) {
          return item.element;
        });
        $(hiddenElems).addClass('hidden');
        $grid.isotope('layout');

        //when no more to load, hide show more button
        if (hiddenElems.length == 0) {
          jQuery("#load-more").hide();
        } else {
          jQuery("#load-more").show();
        };

      }

      //append load more button
      // $grid.after('<button class="" id="load-more"> Load More</button>');

      //when load more button clicked
      $("#load-more").click(function () {
        if ($('#filters').data('clicked')) {
          //when filter button clicked, set initial value for counter
          counter = initShow;
          $('#filters').data('clicked', false);
        } else {
          counter = counter;
        };

        counter = counter + initShow;

        loadMore(counter);
      });

      //when filter button clicked
      $("#filters").click(function () {
        $(this).data('clicked', true);

        loadMore(initShow);
      });
    }
}

document.addEventListener('DOMContentLoaded', init);

但是控制台日志

TypeError: $(...).isotope is not a function
    init http://localhost:8848/assets/js/main.js:73
    e http://localhost:8848/assets/js/swup.min.js:1
    e http://localhost:8848/assets/js/swup.min.js:1
    e http://localhost:8848/assets/js/swup.min.js:1
    e http://localhost:8848/assets/js/swup.min.js:1

当页面重新加载时，控制台错误消失了。

谢谢你的帮助。

4

0 回答 0