javascript - 如何编辑/删除同位素库中的 `show all` View ？

Question

关于这个还有另外两个主题，但它们对我没有帮助。

我有这个 html:

        <div class="portfolio_inner_area">
            <div class="portfolio_filter">
                <ul>
                    <li data-filter="*" class="active"><a href=""> All</a></li>
                    <li data-filter=".photography"><a href="">ARCHITECTURE</a></li>
                    <li data-filter=".branding"><a href="">Building</a></li>
                    <li data-filter=".webdesign"><a href="">CONSTRUCTION</a></li>
                    <li data-filter=".adversting"><a href="">DESIGN</a></li>
                    <li data-filter=".painting"><a href="">Painting</a></li>
                </ul>
            </div>
            <div class="portfolio_item">
               <div class="grid-sizer"></div>
                <div class="single_facilities col-xs-4 p0 painting photography adversting">
                   <div class="single_facilities_inner">
                        <img src="https://i.ibb.co/6sJ72xx/sv-6.jpg" alt="">
                        <div class="gallery_hover">
                            <h4>Construction</h4>
                            <ul>
                                <li><a href="#"><i class="fa fa-link" aria-hidden="true"></i></a></li>
                                <li><a href="#"><i class="fa fa-search" aria-hidden="true"></i></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="single_facilities col-xs-4 p0 webdesign">
                   <div class="single_facilities_inner">
                        <img src="https://i.ibb.co/ZVwt1mP/sv-1.jpg" alt="">
                        <div class="gallery_hover">
                            <h4>Construction</h4>
                            <ul>
                                <li><a href="#"><i class="fa fa-link" aria-hidden="true"></i></a></li>
                                <li><a href="#"><i class="fa fa-search" aria-hidden="true"></i></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="single_facilities col-xs-4 painting p0 photography branding">
                   <div class="single_facilities_inner">
                        <img src="https://i.ibb.co/dDm9P1S/sv-2.jpg" alt="">
                        <div class="gallery_hover">
                            <h4>Construction</h4>
                            <ul>
                                <li><a href="#"><i class="fa fa-link" aria-hidden="true"></i></a></li>
                                <li><a href="#"><i class="fa fa-search" aria-hidden="true"></i></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="single_facilities col-xs-4 p0 adversting webdesign adversting">
                   <div class="single_facilities_inner">
                        <img src="https://i.ibb.co/h165CJ0/sv-3.jpg" alt="">
                        <div class="gallery_hover">
                            <h4>Construction</h4>
                            <ul>
                                <li><a href="#"><i class="fa fa-link" aria-hidden="true"></i></a></li>
                                <li><a href="#"><i class="fa fa-search" aria-hidden="true"></i></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="single_facilities col-xs-4 p0 painting adversting branding">
                   <div class="single_facilities_inner">
                        <img src="https://i.ibb.co/RcRkDRR/sv-4.jpg" alt="">
                        <div class="gallery_hover">
                            <h4>Construction</h4>
                            <ul>
                                <li><a href="#"><i class="fa fa-link" aria-hidden="true"></i></a></li>
                                <li><a href="#"><i class="fa fa-search" aria-hidden="true"></i></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="single_facilities col-xs-4 p0 webdesign photography magazine adversting">
                   <div class="single_facilities_inner">
                        <img src="https://i.ibb.co/QHj581r/sv-5.jpg" alt="">
                        <div class="gallery_hover">
                            <h4>Construction</h4>
                            <ul>
                                <li><a href="#"><i class="fa fa-link" aria-hidden="true"></i></a></li>
                                <li><a href="#"><i class="fa fa-search" aria-hidden="true"></i></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

和JS同位素代码:

//* Isotope Js
function portfolio_isotope(){
    if ( $('.portfolio_item, .portfolio_2 .portfolio_filter ul li').length ){
        // Activate isotope in container
        $(".portfolio_item").imagesLoaded( function() {
            $(".portfolio_item").isotope({
                itemSelector: ".single_facilities",
                layoutMode: 'masonry',
                percentPosition:true,
                masonry: {
                    columnWidth: ".grid-sizer, .grid-sizer-2"
                }
            });
        });

        // Activate isotope in container
        $(".portfolio_2").imagesLoaded( function() {
            $(".portfolio_2").isotope({
                itemSelector: ".single_facilities",
                layoutMode: 'fitRows',
            });
        });
        // Add isotope click function
        $(".portfolio_filter ul li").on('click',function(){
            $(".portfolio_filter ul li").removeClass("active");
            $(this).addClass("active");

            var selector = $(this).attr("data-filter");
            $(".portfolio_item, .portfolio_2").isotope({
                filter: selector,
                animationOptions: {
                    duration: 450,
                    easing: "linear",
                    queue: false,
                }
            });
            return false;
        });
    }
};

它会在页面加载时自动显示所有图像。所以我试着评论这一行:

<li data-filter="*" class="active"><a href=""> All</a></li>

它从菜单中删除它，但仍会在页面加载时显示所有图像。如果我设置 class="active"在另一个类别上，它在页面加载时被标记，但仍然显示所有图像，如果我点击它，那么它只显示该类别的图像(但在点击之后)。

任何想法，如何解决这个问题？

JSFiddle

Answer 1

好的，我明白你想要从 isotope 中删除 all 选项的期望了

先删除

<li data-filter="*" ><a href=""> All</a></li>

其次在第一个类上添加事件类

 <li data-filter=".photography" class="active"><a href="">ARCHITECTURE</a></li>

并且在初始化同位素时，您可以添加 fileter 属性作为摄影。

 $(".portfolio_item").isotope({
                    itemSelector: ".single_facilities",
                    layoutMode: 'masonry',
                    percentPosition:true,
                    filter: '.photography',
                    masonry: {
                        columnWidth: ".grid-sizer, .grid-sizer-2"
                    }
                });

检查这一行

 filter: '.photography',

检查这个documentation ，您可以控制过滤器，您可以通过在其上应用类轻松地过滤掉。

$grid.isotope({ filter: '*' })

Demo