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 hub严格来说只是用于bug报告，因为这可能只是我的无知。

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 });
        });

同位素错误：分拣机不是一个功能。同位素不排序

1 个答案: