我有3个按钮，有点像我想在同位素.js中使用的过滤器(较小/相同/较大(。我一直在看文档，但仍然不知道如何使其工作。在我看来，一切都设置好了，但它仍然不能正常工作，因为它是一个只显示具有确切类的项目的过滤器。这是HTML:
<div id="mouse-buttons-wrapper">
<div class="btn-group filter-button-group" id="mouse-buttons">
<button type="button" class="button btn btn-lg btn-outline-warning" id="Smaller"
data-filter=".smaller">Smaller</button>
<button type="button" class="btn btn-lg btn-outline-warning" id="Same">Same</button>
<button type="button" class="btn btn-lg btn-outline-warning" id="Bigger">Bigger</button>
</div>
</div>
<div class="btn-group" id="mouse-buttons"></div>
<div class="container" id="mouses">
<div class="row row-cols-1 row-cols-md-5 g-4 text-justify grid">
<div class="col grid-item smaller">
<div class="card">
<img src="..." class="card-img-top img-fluid" alt="...">
<div class="card-body">
<h6 class="card-title">Card title</h6>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col grid-item">
<div class="card">
<img src="..." class="card-img-top img-fluid" alt="...">
<div class="card-body">
<h6 class="card-title">Card title</h6>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col grid-item">
<div class="card">
<img src="..." class="card-img-top img-fluid" alt="...">
<div class="card-body">
<h6 class="card-title">Card title</h6>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col grid-item">
<div class="card">
<img src="..." class="card-img-top img-fluid" alt="...">
<div class="card-body">
<h6 class="card-title">Card title</h6>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col grid-item">
<div class="card">
<img src="..." class="card-img-top img-fluid" alt="...">
<div class="card-body">
<h6 class="card-title">Card title</h6>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>
</div>
我的Javascript I用于同位素设置：
$('.grid').isotope({
// options...
itemSelector: '.grid-item',
masonry: {
columnWidth: 200
}
});
// filters
$(".grid").isotope({
filter: '.smaller'
});
$(".grid").isotope({
filter: '.same'
});
$(".grid").isotope({
filter: '.bigger'
});
})(jQuery); // End of use strict
// 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
});
$('.filter-button-group').on('click', 'button', function () {
var filterValue = $(this).attr('data-filter');
$grid.isotope({
filter: filterValue
});
如果能给我任何帮助，我将不胜感激，我已经在这件事上坚持了很长一段时间了。非常感谢。
您没有遵循同位素的基本结构。请遵循以下结构：
<html>
<div id="mouse-buttons-wrapper">
<div class="btn-group filter-button-group" id="mouse-buttons">
<button type="button" class="button btn btn-lg btn-outline-warning" id="Smaller" data-filter=".smaller">Smaller</button>
<button type="button" class="btn btn-lg btn-outline-warning" id="Same" data-filter=".same">Same</button>
<button type="button" class="btn btn-lg btn-outline-warning" id="Bigger" data-filter=".bigger">Bigger</button>
</div>
</div>
<div class="container" id="mouses">
<div class="row row-cols-1 row-cols-md-5 g-4 text-justify grid">
<div class="col grid-item smaller">
<div class="card">
<img src="..." class="card-img-top img-fluid" alt="...">
<div class="card-body">
<h6 class="card-title">Card title</h6>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col grid-item same">
<div class="card">
<img src="..." class="card-img-top img-fluid" alt="...">
<div class="card-body">
<h6 class="card-title">Card title</h6>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col grid-item bigger">
<div class="card">
<img src="..." class="card-img-top img-fluid" alt="...">
<div class="card-body">
<h6 class="card-title">Card title</h6>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col grid-item smaller">
<div class="card">
<img src="..." class="card-img-top img-fluid" alt="...">
<div class="card-body">
<h6 class="card-title">Card title</h6>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col grid-item bigger">
<div class="card">
<img src="..." class="card-img-top img-fluid" alt="...">
<div class="card-body">
<h6 class="card-title">Card title</h6>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>
</html>
<script type="text/javascript">
jQuery(document).ready(function($) {
var $grid = $('.grid').isotope({
// options...
itemSelector: '.grid-item',
masonry: {
columnWidth: 200
}
});
$("#mouse-buttons").on("click", "btn", function() {
var filterValue = $( this ).attr('data-filter');
$grid.isotope({ filter: filterValue });
});
});
</script>