Сортировка с изотопом не работает - PullRequest
Новая
       7

Сортировка с изотопом не работает

0 голосов
/ 25 августа 2018

Я новичок в javacript и мало знаю о том, что происходит, и я просто не могу заставить Изотоп изобразить мою сетку

Это кнопки 

<div class="button-group sort-by-button-group">
            <div class="filter">
                <span class="sort__label">Sorting: </span>
                <button class="action filter__item filter__item--selected" data-sort-value="original-order">None</button>
                <button class="action filter__item" data-sort-value="name">Name</button>
                    <button class="action filter__item" data-sort-value="number">Price</button>
            </div>
        </div>'

Это элемент сетки 

<div class="grid__item x">
                <div class="slider">
                    <div class="slider__item"><img src="images/x.png" /></div>
                    <div class="slider__item"><img src="images/x.png" /></div>
                    <div class="slider__item"><img src="images/x.png" /></div>
                </div>
                <div class="meta">
                    <h3 class="name">x</h3>
                    <span class="meta__brand">xx</span>
                    <span class="number">x</span>
                </div>
                    <button class="action action--button action--buy"><i class="fa fa-shopping-cart"></i><span class="text-hidden">Add to shopping cart</span></button>
            </div>

Это javacript, который у меня есть в нижней части моего HTML-документа 

    <script>
            // init Isotope
    var iso = new Isotope( '.grid', {
      itemSelector: '.grid__item',
      layoutMode: 'fitRows',
      getSortData: {
        name: '.name',
        number: '.number parseInt',
        }
      }
    });

    // bind sort button click
    var sortByGroup = document.querySelector('.sort-by-button-group');
    sortByGroup.addEventListener( 'click', function( event ) {
      // only button clicks
      if ( !matchesSelector( event.target, '.button' ) ) {
        return;
      }
      var sortValue = event.target.getAttribute('data-sort-value');
      iso.arrange({ sortBy: sortValue });
    });

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

    function onButtonGroupClick( event ) {
      // only button clicks
      if ( !matchesSelector( event.target, '.button' ) ) {
        return;
      }
      var button = event.target;
      button.parentNode.querySelector('.is-checked').classList.remove('is-checked');
      button.classList.add('is-checked');
    }
</script>

Я пытался более пары часов, но не могу заставить его работать.

Заранее спасибо! Магнус Н

...