用同位素排序不起作用
Sorting with Isotope Not Working
我是 javascript 的新手,我不明白为什么我的排序不起作用。过滤部分工作正常,但有一个小问题(我似乎无法让它居中我的部分 "portfolio")。我已经阅读了所有同位素页面,甚至阅读了此处的多个页面,但没有任何内容符合我的问题。
这是我的代码,基本上是从 Isotope 复制而来的,如果有人能帮我弄清楚为什么这不起作用,我将不胜感激:
<div id="sorts" class="button-group">
<button data-sort-by="original-order">original order</button>
<button data-sort-by="name">name</button>
<button data-sort-by="symbol">symbol</button>
<button data-sort-by="number">number</button>
<button data-sort-by="weight">weight</button>
<button data-sort-by="category">category</button>
</div>
<section class="portfolio">
<article class="entry video"><img src="baldwin.jpg" alt=""/>
<span class="magnifier"></span>
<h3 class="name">Baldwin</h3>
<p class="symbol">Hg</p>
<p class="number">80</p>
<p class="weight">200.59</p>
</article>
<article class="entry modern">
<img src="berkley.jpg" alt="">
<span class="magnifier"></span>
<h3 class="name">Berkley</h3>
<p class="symbol">Te</p>
<p class="number">52</p>
<p class="weight">127.6</p>
</article>
还有我的jquery:
<script>
//sorting
$(function() {
var $container = $('.portfolio').isotope({
itemSelector: '.entry',
layoutMode: 'fitRows',
transitionDuration: '0.6s',
getSortData: {
name: '.name',
symbol: '.symbol',
number: '.number parseInt',
weight: function( itemElem ) {
var weight = $( itemElem ).find('.weight').text();
return parseFloat( weight.replace( /[\(\)]/g, '') );
}
}
// initial sortBy from button group
// sortBy: $buttonGroup.find(':checked').val()
});
$('#sorts').on( 'click', 'button', function() {
var sortByValue = $(this).attr('data-sort-by');
$container.isotope({ sortBy: sortByValue });
});
});
//filtering
var $container = $('.portfolio');
$container.isotope({
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
$('nav.primary ul a').click(function(){
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
return false;
});
var $optionSets = $('nav.primary ul'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return false;
}
var $optionSet = $this.parents('nav.primary ul');
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
});
</script>
您的 HTML 和 javascript 有一些错误。我能够让脚本与下面的 JS 一起工作:
$(function() {
var $container = $('.portfolio').isotope({
itemSelector: '.entry',
layoutMode: 'fitRows',
transitionDuration: '0.6s',
getSortData: {
name: '.name',
symbol: '.symbol',
number: '.number parseInt',
weight: function( itemElem ) {
var weight = $( itemElem ).find('.weight').text();
return parseFloat( weight.replace( /[\(\)]/g, '') );
}
}
// initial sortBy from button group
// sortBy: $buttonGroup.find(':checked').val()
});
$('#sorts').on( 'click', 'button', function() {
var sortByValue = $(this).attr('data-sort-by');
$container.isotope({ sortBy: sortByValue });
});
});
您在主要同位素函数的开头遗漏了一个 $
,并且 section
没有关闭。
我不确定您将变量 'ID' 用于什么目的或您如何调用该函数,但上面的代码可以工作。
祝你好运!
我是 javascript 的新手,我不明白为什么我的排序不起作用。过滤部分工作正常,但有一个小问题(我似乎无法让它居中我的部分 "portfolio")。我已经阅读了所有同位素页面,甚至阅读了此处的多个页面,但没有任何内容符合我的问题。
这是我的代码,基本上是从 Isotope 复制而来的,如果有人能帮我弄清楚为什么这不起作用,我将不胜感激:
<div id="sorts" class="button-group">
<button data-sort-by="original-order">original order</button>
<button data-sort-by="name">name</button>
<button data-sort-by="symbol">symbol</button>
<button data-sort-by="number">number</button>
<button data-sort-by="weight">weight</button>
<button data-sort-by="category">category</button>
</div>
<section class="portfolio">
<article class="entry video"><img src="baldwin.jpg" alt=""/>
<span class="magnifier"></span>
<h3 class="name">Baldwin</h3>
<p class="symbol">Hg</p>
<p class="number">80</p>
<p class="weight">200.59</p>
</article>
<article class="entry modern">
<img src="berkley.jpg" alt="">
<span class="magnifier"></span>
<h3 class="name">Berkley</h3>
<p class="symbol">Te</p>
<p class="number">52</p>
<p class="weight">127.6</p>
</article>
还有我的jquery:
<script>
//sorting
$(function() {
var $container = $('.portfolio').isotope({
itemSelector: '.entry',
layoutMode: 'fitRows',
transitionDuration: '0.6s',
getSortData: {
name: '.name',
symbol: '.symbol',
number: '.number parseInt',
weight: function( itemElem ) {
var weight = $( itemElem ).find('.weight').text();
return parseFloat( weight.replace( /[\(\)]/g, '') );
}
}
// initial sortBy from button group
// sortBy: $buttonGroup.find(':checked').val()
});
$('#sorts').on( 'click', 'button', function() {
var sortByValue = $(this).attr('data-sort-by');
$container.isotope({ sortBy: sortByValue });
});
});
//filtering
var $container = $('.portfolio');
$container.isotope({
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
$('nav.primary ul a').click(function(){
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
return false;
});
var $optionSets = $('nav.primary ul'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return false;
}
var $optionSet = $this.parents('nav.primary ul');
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
});
</script>
您的 HTML 和 javascript 有一些错误。我能够让脚本与下面的 JS 一起工作:
$(function() {
var $container = $('.portfolio').isotope({
itemSelector: '.entry',
layoutMode: 'fitRows',
transitionDuration: '0.6s',
getSortData: {
name: '.name',
symbol: '.symbol',
number: '.number parseInt',
weight: function( itemElem ) {
var weight = $( itemElem ).find('.weight').text();
return parseFloat( weight.replace( /[\(\)]/g, '') );
}
}
// initial sortBy from button group
// sortBy: $buttonGroup.find(':checked').val()
});
$('#sorts').on( 'click', 'button', function() {
var sortByValue = $(this).attr('data-sort-by');
$container.isotope({ sortBy: sortByValue });
});
});
您在主要同位素函数的开头遗漏了一个 $
,并且 section
没有关闭。
我不确定您将变量 'ID' 用于什么目的或您如何调用该函数,但上面的代码可以工作。
祝你好运!