同位素 - 无法读取未定义的属性“filteredItems”

问题描述 投票:6回答:2

我试图让我的同位素帖子页面使用加载更多按钮(如下所示:https://codepen.io/bebjakub/pen/jWoYEO)。我有代码在Codepen上工作,但我无法在网站上工作。

工作Codepen(我的(过滤和加载更多) - https://codepen.io/whitinggg/pen/qyvVwz

实时页面链接 - Here

我目前在控制台中看到有关我的isotope.js文件的错误:

Uncaught TypeError: Cannot read property 'filteredItems' of undefined
    at loadMore (isotope.js?v=2.2.7:53)
    at HTMLDocument.<anonymous> (isotope.js?v=2.2.7:48)
    at i (jquery.js?ver=1.12.4:2)
    at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4:2)
    at Function.ready (jquery.js?ver=1.12.4:2)
    at HTMLDocument.K (jquery.js?ver=1.12.4:2)

任何人都可以帮助解决此错误的含义吗?请帮我解决一下。

我的Isotope.js文件

jQuery(function ($) {


    // with jQuery
    var $container = $('.grid').isotope({
      itemSelector: '.grid-item',
      layoutMode: 'packery',
      columnWidth: '.grid-sizer',
      packery: {
        gutter: '.gutter-sizer'
      }
    });

     //Add the class selected to the item that is clicked, and remove from the others
     var $optionSets = $('#filters'),
     $optionLinks = $optionSets.find('a');

     $optionLinks.click(function(){
     var $this = $(this);
     // don't proceed if already selected
     if ( $this.hasClass('selected') ) {
       return false;
     }
     var $optionSet = $this.parents('#filters');
     $optionSets.find('.selected').removeClass('selected');
     $this.addClass('selected');

     //When an item is clicked, sort the items.
     var selector = $(this).attr('data-filter');
     $container.isotope({ filter: selector });

     return false;
     });

    // layout Isotope after each image loads
    $container.imagesLoaded().progress( function() {
      $container.isotope('layout');
    });


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

  loadMore(initShow); //execute function onload

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

    var hiddenElems = iso.filteredItems.slice(toShow, iso.filteredItems.length).map(function(item) {
      return item.element;
    });
    $(hiddenElems).addClass('hidden');
    $container.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
  $container.after('<button 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);
  })


});
javascript jquery function console typeerror
2个回答
5
投票

它为什么在codepen上工作的问题在我的网站上没有,结果证明是一个简单的问题。不记得我为什么现在这样做了,但是我已经从Codepen略微改变了一行代码,这似乎引起了这个问题。那条线是:

var iso = $container.data('grid'); // get Isotope instance

本来应该:

var iso = $container.data('isotope'); // get Isotope instance

0
投票

问题在于这一行。

var iso = $container.data('grid'); // get Isotope instance
when you print iso it will give you undefined value.

根据我的理解,所有代码都很好。我试过同样的样品工作正常。

 var iso = $container.data('isotope');

使用默认功能后,对我来说没问题。如果你尝试console.log(iso);然后它会打印对象。

希望这会有所帮助。

© www.soinside.com 2019 - 2024. All rights reserved.