我不知道为什么,但是我的脚本无法运行,我希望你们能帮助我。
fiddle
http://jsfiddle.net/etu4ce7s/2/
这是我过滤内容中框的代码:
$(document).ready( function() {
// init Isotope
var $grid = $('.grid').isotope({
itemSelector: '.mix'
});
// store filter for each group
var filters = {};
$('.controls').on( 'click', '.button', function() {
var $this = $(this);
// get group key
var $buttonGroup = $this.parents('.button-group');
var filterGroup = $buttonGroup.attr('data-filter-group');
// set filter for group
filters[ filterGroup ] = $this.attr('data-filter');
// combine filters
var filterValue = concatValues( filters );
// set filter for Isotope
$grid.isotope({ filter: filterValue });
});
// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$( this ).addClass('is-checked');
});
});
});
最佳答案
过去一个小时我一直在处理这个问题,但无济于事......但是,我创建了同位素的工作版本,也许它会对你有所帮助。
// init Isotope
var $grid = $('.grid').isotope({
// options
});
// filter items on button click
$('.filter-button-group').on( 'click', 'button', function() {
var filterValue = $(this).attr('data-filter');
$grid.isotope({ filter: filterValue });
});
<div class="button-group filter-button-group">
<button data-filter="*">show all</button>
<button data-filter=".metal">metal</button>
<button data-filter=".transition">transition</button>
<button data-filter=".alkali, .alkaline-earth">alkali and alkaline-earth</button>
<button data-filter=":not(.transition)">not transition</button>
<button data-filter=".metal:not(.transition)">metal but not transition</button>
</div>
<div class="grid">
<div class="element-item transition metal">Item 1</div>
<div class="element-item post-transition metal">Item 2</div>
<div class="element-item alkali metal">Item 3</div>
<div class="element-item transition metal">Item 4</div>
<div class="element-item lanthanoid metal inner-transition">Item 5</div>
<div class="element-item halogen nonmetal">Item 6</div>
<div class="element-item alkaline-earth metal">Item 7</div>
</div>
关于javascript - jQuery Isotope 不会运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34151859/