单击排序按钮时，我的物品消失了

Question

因此，我需要完成一项任务，我必须使用Isotope为品牌创建接口。 我做了一些过滤器按钮，它们都起作用。 但是当我要使用“按价格排序”或“名称”时，它们就消失了，控制台没有给出任何错误，所以我迷路了。

任何解决方案如何解决此问题？ 我的代码：

// init Isotope
var iso = new Isotope('.grid', {
  itemSelector: '.element-item',
  layoutMode: 'fitRows',
  getSortData: {
    symbol: '.symbol',
    prijs: '.prijs',
  }
});

// filter functions
var filterFns = {
  // show if the size = size
  numberGreaterThan50: function(itemElem) {
    var size = itemElem.querySelector('.name').textContent;
    return parseInt() === Regular;
  },
};

// bind filter button click
var filtersElem = document.querySelector('.filters-button-group');
filtersElem.addEventListener('click', function(event) {
  // only work with buttons
  if (!matchesSelector(event.target, 'button')) {
    return;
  }
  var filterValue = event.target.getAttribute('data-filter');
  // use matching filter function
  filterValue = filterFns[filterValue] || filterValue;
  iso.arrange({
    filter: filterValue
  });
});

// change is-checked class on buttons
var buttonGroups = document.querySelectorAll('.button-group');
for (var i = 0, len = buttonGroups.length; i < len; i++) {
  var buttonGroup = buttonGroups[i];
  radioButtonGroup(buttonGroup);
}

function radioButtonGroup(buttonGroup) {
  buttonGroup.addEventListener('click', function(event) {
    // only work with buttons
    if (!matchesSelector(event.target, 'button')) {
      return;
    }
    buttonGroup.querySelector('.is-checked').classList.remove('is-checked');
    event.target.classList.add('is-checked');
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js"></script>

<header>
  <img src="http://logok.org/wp-content/uploads/2015/02/Dominos-pizza-logo-old.png" width="220px" height="160px">
  <h1>Dominos Pizza</h1>
</header>

<div class="container">
  <div class="button-group filters-button-group" id="strook">
    <button class="button is-checked" data-filter="*">show all products</button>
    <button class="button" data-filter=".regular">regular</button>
    <button class="button" data-filter=".medium">medium</button>
    <button class="button" data-filter=".large">large</button>
    <button class="button" data-filter=".side-orders">side-orders</button>
    <button class="button" data-filter=".drinks">drinks</button>
    <button class="button" data-filter=".symbol">name</button>
    <button class="button" data-filter=".price">price</button>
  </div>

  <div class="grid">
    <div class="element-item regular pizza " data-category="regular">
      <h3 class="name">Regular</h3>
      <h4 class="symbol">BBQ Chicken</h4>
      <p class="prijs">€11</p>
    </div>

    <div class="element-item regular pizza" data-category="regular">
      <h3 class="name">Regular</h3>
      <h4 class="symbol">Forestière</h4>
      <p class="prijs">€9</p>
    </div>

    <div class="element-item regular pizza " data-category="regular">
      <h3 class="name">Regular</h3>
      <h4 class="symbol">Cannibale</h4>
      <p class="prijs">€11</p>
    </div>

    <div class="element-item regular pizza " data-category="regular">
      <h3 class="name">Regular</h3>
      <h4 class="symbol">Hot & Spicy</h4>
      <p class="prijs">€11</p>
    </div>

    <div class="element-item regular pizza " data-category="regular">
      <h3 class="name">Regular</h3>
      <h4 class="symbol">4 Stagioni</h4>
      <p class="prijs">€10</p>
    </div>

    <div class="element-item regular pizza " data-category="regular">
      <h3 class="name">Regular</h3>
      <h4 class="symbol">American</h4>
      <p class="prijs">€9</p>
    </div>

    <div class="element-item medium pizza " data-category="medium">
      <h3 class="name">Medium</h3>
      <h4 class="symbol">Gyros</h4>
      <p class="prijs">€12</p>
    </div>

    <div class="element-item medium pizza " data-category="medium">
      <h3 class="name">Medium</h3>
      <h4 class="symbol">Extravaganzza</h4>
      <p class="prijs">€13</p>
    </div>

    <div class="element-item medium pizza " data-category="medium">
      <h3 class="name">Medium</h3>
      <h4 class="symbol">Spicy Chicken</h4>
      <p class="prijs">€13</p>
    </div>

    <div class="element-item medium pizza " data-category="medium">
      <h3 class="name">Medium</h3>
      <h4 class="symbol">Diabolika</h4>
      <p class="prijs">€12</p>
    </div>

    <div class="element-item medium pizza " data-category="medium">
      <h3 class="name">Medium</h3>
      <h4 class="symbol">Veggi</h4>
      <p class="prijs">€12</p>
    </div>

    <div class="element-item medium pizza " data-category="medium">
      <h3 class="name">Medium</h3>
      <h4 class="symbol">Margherita</h4>
      <p class="prijs">€11</p>
    </div>

    <div class="element-item large pizza " data-category="large">
      <h3 class="name">Large</h3>
      <h4 class="symbol">Beef Fanatica</h4>
      <p class="prijs">€17</p>
    </div>

    <div class="element-item large pizza " data-category="large">
      <h3 class="name">Large</h3>
      <h4 class="symbol">Chicken Kebab</h4>
      <p class="prijs">€17</p>
    </div>

    <div class="element-item large pizza " data-category="large">
      <h3 class="name">Large</h3>
      <h4 class="symbol">Tonno</h4>
      <p class="prijs">€17</p>
    </div>

    <div class="element-item large pizza " data-category="large">
      <h3 class="name">Large</h3>
      <h4 class="symbol">Garnalen</h4>
      <p class="prijs">€17</p>
    </div>

    <div class="element-item large pizza " data-category="large">
      <h3 class="name">Large</h3>
      <h4 class="symbol">4 Cheese</h4>
      <p class="prijs">€16</p>
    </div>

    <div class="element-item large pizza " data-category="large">
      <h3 class="name">Large</h3>
      <h4 class="symbol">Hawaiian</h4>
      <p class="prijs">€14</p>
    </div>

    <div class="element-item side-orders " data-category="side-orders">
      <h3 class="name">Side-order</h3>
      <h4 class="symbol">Popcorn Chicken</h4>
      <p class="prijs">€5</p>
    </div>

    <div class="element-item side-orders " data-category="side-order">
      <h3 class="name">Side-order</h3>
      <h4 class="symbol">Cheesy Bread</h4>
      <p class="prijs">€4</p>
    </div>

    <div class="element-item side-orders " data-category="side-order">
      <h3 class="name">Side-order</h3>
      <h4 class="symbol">Buffalo Wings</h4>
      <p class="prijs">€5</p>
    </div>

    <div class="element-item side-orders " data-category="side-order">
      <h3 class="name">Side-order</h3>
      <h4 class="symbol">Potatoe Wedges</h4>
      <p class="prijs">€3,50</p>
    </div>

    <div class="element-item drinks " data-category="drinks">
      <h3 class="name">Drinks</h3>
      <h4 class="symbol">33 Cl Coca-Cola</h4>
      <p class="prijs">€1,50</p>
    </div>

    <div class="element-item drinks " data-category="drinks">
      <h3 class="name">Drinks</h3>
      <h4 class="symbol">33 Cl Coca-Cola Light</h4>
      <p class="prijs">€1,50</p>
    </div>

    <div class="element-item drinks " data-category="drinks">
      <h3 class="name">Drinks</h3>
      <h4 class="symbol">33 Cl Coca-Cola Zero</h4>
      <p class="prijs">€1,50</p>
    </div>

    <div class="element-item drinks " data-category="drinks">
      <h3 class="name">Drinks</h3>
      <h4 class="symbol">33 Cl Fanta</h4>
      <p class="prijs">€1,50</p>
    </div>

    <div class="element-item drinks " data-category="drinks">
      <h3 class="name">Drinks</h3>
      <h4 class="symbol">33 Cl Lipton Ice-Tea</h4>
      <p class="prijs">€1,50</p>
    </div>

    <div class="element-item drinks " data-category="drinks">
      <h3 class="name">Drinks</h3>
      <h4 class="symbol">33 Cl Sprite</h4>
      <p class="prijs">€1,50</p>
    </div>

    <div class="element-item drinks " data-category="drinks">
      <h3 class="name">Drinks</h3>
      <h4 class="symbol">50 Cl Spa Reine</h4>
      <p class="prijs">€1,60</p>
    </div>

    <div class="element-item drinks " data-category="drinks">
      <h3 class="name">Drinks</h3>
      <h4 class="symbol">33 Cl Jupiler Beer</h4>
      <p class="prijs">€1,70</p>
    </div>
  </div>
</div>

<div class="photo"></div>