如何在同位素库中编辑/删除`show all`视图？

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

好的,所以我明白你期望从中删除all选项isotope

首先删除

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

查看此文档,您可以控制过滤器,您可以通过在其上应用类来轻松过滤掉.

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

演示