javascript - 我可以使用其他过滤器来代替 Isotope.js 吗？Isotope.js 无法正常工作，我不知道为什么

Question

我有 3 个按钮，有点像我想与 Isotope.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
});

我会很感激任何帮助，我很长时间以来一直坚持这一点。非常感谢。

标签： javascripthtmlbuttonfilteringjquery-isotope

Answer 1

您没有遵循同位素的基本结构。请遵循以下结构：

<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>