Isotope error: sorter is not a function. Isotope not sorting
Isotope error: sorter is not a function. Isotope not sorting
我正在使用 Jquery 同位素。过滤似乎工作正常但是当我添加排序功能时我得到两个错误:
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 严格只用于错误报告,这可能只是我的无知。
我意识到我没有先声明数组 - 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 });
});
我正在使用 Jquery 同位素。过滤似乎工作正常但是当我添加排序功能时我得到两个错误:
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 严格只用于错误报告,这可能只是我的无知。
我意识到我没有先声明数组 - 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 });
});