동위 원소 오류 : 분류기가 기능이 아닙니다. 동위 원소가 정렬되지 않음

Question

Jquery Isotope을 사용 중입니다. 필터링은 잘 작동하는 것 같다하지만 난 정렬 기능을 추가 할 때 나는 두 가지 오류 얻을 :

isotope Uncaught TypeError: sorter is not a function 

  여기

$().isotope("reLayout") is not a valid method 

을 내 HTML과 JQuery와 :

HTML

<select id="sortBy" name="sort"> 
    <option value="pricelowtohigh">Price low to high</option> 
    <option value="pricehightolow">Price high to low</option> 
</select> 


    <li class="block filter-john-doe filter-productname"> 
<a class="page-fade" href="{{ product.url }}"> 
     <div> 
      <h2 class="small">John Doe</h2> 
      <p>Lorem ipsum</p> 
      <p><span class="price" data-price="995">£995</span></p> 
     </div> 
    </a> 
</li> 

JS

$(document).ready(function() { 
    onHashchange(); 

    var $grid = $('.grid').isotope({ 
     itemSelector: '.block', 
     layoutMode: 'fitRows', 
     getSortData: { 
      pricelowtohigh: '[data-price] parseInt', 
      pricehightolow: '[data-price] parseInt', 

     } 
     sortAscending: { 
      pricelowtohigh: true, 
      pricehightolow: false 
     } 
    }); 
    var filters = {}; 

    $('.filter').change(function() { 
     var $this = $(this); 

     var $buttonGroup = $this.parents('.inputGroup'); 
     var filterGroup = $buttonGroup.attr('data-filter-group'); 

     filters[ filterGroup ] = $this.attr('data-filter'); 
     // combine filters 
     var filterValue = concatValues(filters); 
     $grid.isotope({ filter: filterValue }); 
    }); 

    $('#sortBy').change(function() { 
     var sortValue = $(this).val(); 
     $grid.isotope({ sortBy: sortValue }); 
    }); 
}); 

$(window).load(function(){$(".grid").isotope('reLayout');}); 

$(window).on('hashchange', function() { 
     onHashchange(); 

    }); 

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

이유는 누구입니까? Isotope는 그들의 git 허브가 버그 리포트에 대해서만 엄격하게 사용되기 때문에 많은 지원을하지 못합니다. 아마도 이것은 단지 내 무지 때문일 것입니다.

Answer 1

배열을 먼저 선언하지 않았다는 것을 깨달았습니다. sortBy: ['price'] 또한 오름차순 및 내림차순 함수를 선언하지만 끝에 sortby 함수를 직접 파싱하는 방법을 찾았습니다. $grid.isotope({ sortBy: 'price', sortAscending: isAscending });

var $grid = $('.grid').isotope({ 
      itemSelector: '.block', 
      layoutMode: 'fitRows', 
      getSortData: { 
       price: '[data-price] parseInt', 
       // pricehightolow: '[data-price] parseInt', 

      }, 
      sortBy: ['price'] 

     }); 

     $('#sortBy').change(function() { 
      var sortValue = $(this).val(); 
      console.log("sortBy "+sortValue); 
      var isAscending = sortValue === 'pricelowtohigh' ? true : false; 
      $grid.isotope({ sortBy: 'price', sortAscending: isAscending }); 
     });