Question

我是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>

这是我在html文档底部的Javacript

    <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>

我已经尝试了两个多小时，但我无法使其正常工作。

提前谢谢！马格努斯H

用同位素分类不起作用

0 个答案: