如何解决同位素不过滤物品
我对JavaScript / jQuery比较陌生，因此这可能对其他人有非常明显的答案，但是请忍受我?
我已经实现了Isotope来过滤投资组合站点上的项目，同时保持原始布局-该部分有效（是）。我可以使用过滤器按钮（打开和关闭），但是这些项目实际上并未过滤。当我单击按钮时，卡片将像已被过滤一样闪烁，但是它们将继续显示，而不是我单击的类别中的卡片。我不知道这是HTML还是JS。
下面是必需的HTML，CSS和JS。预先谢谢你！
Isotope.Item.prototype._create = function() {
// assign id,used for original-order sorting
this.id = this.layout.itemGUID++;
// transition objects
this._transn = {
ingProperties: {},clean: {},onEnd: {}
};
this.sortData = {};
};
Isotope.Item.prototype.layoutPosition = function() {
this.emitEvent( 'layout',[ this ] );
};
Isotope.prototype.arrange = function( opts ) {
// set any options pass
this.option( opts );
this._getIsInstant();
// just filter
this.filteredItems = this._filter( this.items );
// flag for initalized
this._isLayoutInited = true;
};
// layout mode that does not position items
Isotope.LayoutMode.create('none');
// --------------- //
// init Isotope
var $grid = $('.grid').isotope({
itemSelector: '.card',layoutMode: 'none'
});
// filter functions
var filterFns = {
// show all
all: function() {
var all = $(this).find('.screenplays,.video,.production');
return all.match('.screenplays,.production');
},// show screenplays
screenplays: function() {
var screenplays = $(this).find('.screenplays');
return screenplays.match('.screenplays');
},// show video
video: function() {
var video = $(this).find('.video');
return video.match('.video');
},// show production
production: function() {
var production = $(this).find('.production');
return production.match('.production');
}
};
// bind filter button click
$('.filter-nav').on( 'click','button',function() {
var filterValue = $( this ).attr('data-filter');
// use filterFn if matches value
filterValue = filterFns[ filterValue ] || filterValue;
$grid.isotope({ filter: filterValue });
});
// change active class on buttons
$('.filter-nav').each( function( i,buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click',function() {
$buttonGroup.find('.active').removeClass('active');
$( this ).addClass('active');
});
});/* Custom default button */
.btn-secondary,.btn-secondary:hover,.btn-secondary:focus {
color: #333;
text-shadow: none; /* Prevent inheritance from `body` */
background-color: #fff;
border: .05rem solid #fff;
font-family: 'Special Elite',cursive;
}
.lead-portfolio {
font-family: 'Open Sans',sans-serif !important;
font-weight: 400;
font-size: 14px !important;
}
.lead-portfolio-dark {
font-family: 'Open Sans',sans-serif !important;
font-weight: 400;
font-size: 14px !important;
color: #333 !important;
}
.display-6-dark {
color: #333 !important;
}
.card-columns,.grid {
-webkit-column-count: 2 !important;
-moz-column-count: 2 !important;
column-count: 2 !important;
-webkit-column-gap: 1.25rem;
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
orphans: 1;
widows: 1;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<div class="w-100 mt-3 pb-5">
<div class="btn-group btn-group-toggle filter-nav" data-toggle="buttons">
<button class="btn btn-secondary active" data-filter="*"><input type="radio" autocomplete="off" checked>All</button>
<button class="btn btn-secondary" data-filter=".screenplays"><input type="radio" autocomplete="off">Screenplays</button>
<button class="btn btn-secondary" data-filter=".video"><input type="radio" autocomplete="off">Video Editing</button>
<button class="btn btn-secondary" data-filter=".production"><input type="radio" autocomplete="off">Production</button>
</div>
</div>
<div class="container">
<div class="grid card-columns" data-isotope='{ "itemSelector": ".card","layoutMode": "none" }'>
<div class="video d-inline-block bg-dark mr-md-3 pt-3 pt-md-5 px-sm-3 pb-3 mb-3 pb-5 text-center text-white card centered">
<div class="my-3 p-3">
<h3 class="display-6">TITLE - VIDEO</h3>
<p class="lead-portfolio">Description of video project.</p>
</div>
</div>
<div class="production d-inline-block bg-light mr-md-3 pt-3 pt-md-5 px-sm-3 pb-3 mb-3 text-center order-2 order-md-1 card centered">
<div class="my-3 p-3">
<h3 class="display-6-dark">TITLE - PRODUCTION</h3>
<p class="lead-portfolio-dark">Description of production project.</p>
</div>
<div class="screenplays d-inline-block bg-dark pt-3 px-4 pt-md-5 mb-3 pb-5 text-center text-white order-first order-md-last card centered">
<div class="my-3 py-3">
<h3 class="display-6">TITLE - SCREENPLAY</h3>
<p class="lead-portfolio">Description of screenplay.</p>
</div>
</div>
<div class="screenplays d-inline-block bg-light mr-md-3 pt-3 pt-md-5 px-sm-3 mb-3 pb-5 text-center card centered">
<div class="my-3 p-3">
<h3 class="display-6-dark">TITLE - SCREENPLAY</h3>
<p class="lead-portfolio-dark">Description of screenplay.</p>
</div>
</div>
<div class="screenplays d-inline-block bg-light pt-3 pt-md-5 pb-5 px-sm-3 mb-3 text-center card centered">
<div class="my-3 p-3">
<h3 class="display-6-dark">TITLE - SCREENPLAY</h3>
<p class="lead-portfolio-dark">Description of screenplay.</p>
</div>
</div>
<div class="screenplays d-inline-block bg-dark mr-md-3 pt-3 px-3 pt-md-5 px-sm-3 mb-3 pb-5 text-center text-white card centered">
<div class="my-3 py-3">
<h3 class="display-6">TITLE - SCREENPLAY</h3>
<p class="lead-portfolio">Description of screenplay.</p>
</div>
</div>
<div class="production d-inline-block bg-light pt-3 pt-md-5 px-sm-3 pb-5 mb-3 text-center card centered">
<div class="my-3 p-3">
<h3 class="display-6-dark">TITLE - PRODUCTION</h3>
<p class="lead-portfolio-dark">Description of production project.</p>
</div>
</div>
<div class="screenplays d-inline-block bg-dark pt-3 px-sm-3 pt-md-5 mb-3 px-3 text-center text-white pb-5 card centered">
<div class="my-3 py-3">
<h3 class="display-6">TITLE - SCREENPLAY</h3>
<p class="lead-portfolio">Description of screenplay.</p>
</div>
</div>
</div>
</div>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。