简体   繁体   English

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

[英]Is there any other filter that I can use instead of Isotope.js? Isotope.js just wont work and I don't know why

I've got 3 buttons, sort of a filter (Smaller/Same/Bigger) that I would like to use with Isotope.js.我有 3 个按钮,有点像我想与 Isotope.js 一起使用的过滤器(更小/相同/更大)。 I looked at the documentation all the time but still could not figure out how to make it work.我一直在查看文档,但仍然无法弄清楚如何使其工作。 In my opinion, everything is set good but it is still not working as it should be, as a filter that would show only items with exact class.在我看来,一切都设置得很好,但它仍然不能正常工作,作为一个过滤器,它只显示具有精确 class 的项目。 This is HTML:这是 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>

And my Javascript I for isotope settings:还有我的 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
});

I would appreciate any help, I am seriously stuck on this for a long time.我会很感激任何帮助,我很长时间以来一直坚持这一点。 Thanks a lot.非常感谢。

You are not following the basic structure of isotope.您没有遵循同位素的基本结构。 Kindly follow the below structure:请遵循以下结构:

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM