javascript - 隐藏 div 直到它被数据过滤器选中

Question

我正在使用 Bootstrap 模板并希望更改“投资组合部分”。目前默认显示所有以 HTML 加载的图像，然后，一旦选择了一个标题，图像就会被清除，只显示与该标题(数据过滤器)相关的图像。

我只想更改默认行为。默认情况下，所有图像都必须显示。然后，一旦选择了标题，图像就会像上面解释的那样加载。

这是 Javascript:

 // portfolio filter
$(window).load(function() {
    'use strict',
    $portfolio_selectors = $('.portfolio-filter >li>a');
    if ($portfolio_selectors != 'undefined') {
        $portfolio = $('.portfolio-items');
        $portfolio.isotope({
            itemSelector: '.col-sm-3',
            layoutMode: 'fitRows'
        });

        $portfolio_selectors.on('click', function() {
            $portfolio_selectors.removeClass('active');
            $(this).addClass('active');
            var selector = $(this).attr('data-filter');
            $portfolio.isotope({
                filter: selector
            });
            return false;
        });
    }
});

和 HTML:

<section id="portfolio">
    <div class="container">
        <div class="row text-center">
            <div class="col-sm-8 col-sm-offset-2">
                <h2 class="title-one">Portfolio</h2>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit.</p>
            </div>
        </div>
        <ul class="portfolio-filter text-center">
            <li><a class="btn btn-default active" href="#" data-filter="*">All</a>
            </li>
            <li><a class="btn btn-default" href="#" data-filter=".html">Html</a>
            </li>
            <li><a class="btn btn-default" href="#" data-filter=".wordpress">Wordpress</a>
            </li>
            <li><a class="btn btn-default" href="#" data-filter=".joomla">Joomla</a>
            </li>
            <li><a class="btn btn-default" href="#" data-filter=".megento">Megento</a>
            </li>
        </ul>
        <!--/#portfolio-filter-->
        <div class="portfolio-items">
            <div class="col-sm-3 col-xs-12 portfolio-item html">
                <div class="view efffect">
                    <div class="portfolio-image">
                        <img src="images/our-team/bella.jpg" alt="">
                    </div>
                    <div class="mask text-center">
                        <h3>Novel</h3>
                        <h4>Lorem ipsum dolor sit amet consectetur</h4>
                        <a href="#"><i class="fa fa-link"></i></a>
                        <a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-12 portfolio-item jooma">
                <div class="view efffect">
                    <div class="portfolio-image">
                        <img src="images/our-team/constance.jpg" alt="">
                    </div>
                    <div class="mask text-center">
                        <h3>Novel</h3>
                        <h4>Lorem ipsum dolor sit amet consectetur</h4>
                        <a href="#"><i class="fa fa-link"></i></a>
                        <a href="images/portfolio/big-item4.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-12 portfolio-item wordpress">
                <div class="view efffect">
                    <div class="portfolio-image">
                        <img src="images/our-team/francell.jpg" alt="">
                    </div>
                    <div class="mask text-center">
                        <h3>Novel</h3>
                        <h4>Lorem ipsum dolor sit amet consectetur</h4>
                        <a href="#"><i class="fa fa-link"></i></a>
                        <a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-12 portfolio-item megento">
                <div class="view efffect">
                    <div class="portfolio-image">
                        <img src="images/portfolio/4.jpg" alt="">
                    </div>
                    <div class="mask text-center">
                        <h3>Novel</h3>
                        <h4>Lorem ipsum dolor sit amet consectetur</h4>
                        <a href="#"><i class="fa fa-link"></i></a>
                        <a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-12 portfolio-item html">
                <div class="view efffect">
                    <div class="portfolio-image">
                        <img src="images/portfolio/5.jpg" alt="">
                    </div>
                    <div class="mask text-center">
                        <h3>Novel</h3>
                        <h4>Lorem ipsum dolor sit amet consectetur</h4>
                        <a href="#"><i class="fa fa-link"></i></a>
                        <a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-12 portfolio-item wordpress">
                <div class="view efffect">
                    <div class="portfolio-image">
                        <img src="images/portfolio/6.jpg" alt="">
                    </div>
                    <div class="mask text-center">
                        <h3>Novel</h3>
                        <h4>Lorem ipsum dolor sit amet consectetur</h4>
                        <a href="#"><i class="fa fa-link"></i></a>
                        <a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-12 portfolio-item html">
                <div class="view efffect">
                    <div class="portfolio-image">
                        <img src="images/portfolio/7.jpg" alt="">
                    </div>
                    <div class="mask text-center">
                        <h3>Novel</h3>
                        <h4>Lorem ipsum dolor sit amet consectetur</h4>
                        <a href="#"><i class="fa fa-link"></i></a>
                        <a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-12 portfolio-item joomla">
                <div class="view efffect">
                    <div class="portfolio-image">
                        <img src="images/portfolio/8.jpg" alt="">
                    </div>
                    <div class="mask text-center">
                        <h3>Novel</h3>
                        <h4>Lorem ipsum dolor sit amet consectetur</h4>
                        <a href="#"><i class="fa fa-link"></i></a>
                        <a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-12 portfolio-item html">
                <div class="view efffect">
                    <div class="portfolio-image">
                        <img src="images/portfolio/9.jpg" alt="">
                    </div>
                    <div class="mask text-center">
                        <h3>Novel</h3>
                        <h4>Lorem ipsum dolor sit amet consectetur</h4>
                        <a href="#"><i class="fa fa-link"></i></a>
                        <a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-12 portfolio-item wordpress">
                <div class="view efffect">
                    <div class="portfolio-image">
                        <img src="images/portfolio/10.jpg" alt="">
                    </div>
                    <div class="mask text-center">
                        <h3>Novel</h3>
                        <h4>Lorem ipsum dolor sit amet consectetur</h4>
                        <a href="#"><i class="fa fa-link"></i></a>
                        <a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-12 portfolio-item joomla">
                <div class="view efffect">
                    <div class="portfolio-image">
                        <img src="images/portfolio/11.jpg" alt="">
                    </div>
                    <div class="mask text-center">
                        <h3>Novel</h3>
                        <h4>Lorem ipsum dolor sit amet consectetur</h4>
                        <a href="#"><i class="fa fa-link"></i></a>
                        <a href="images/portfolio/big-item3.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-12 portfolio-item megento">
                <div class="view efffect">
                    <div class="portfolio-image">
                        <img src="images/portfolio/12.jpg" alt="">
                    </div>
                    <div class="mask text-center">
                        <h3>Novel</h3>
                        <h4>Lorem ipsum dolor sit amet consectetur</h4>
                        <a href="#"><i class="fa fa-link"></i></a>
                        <a href="images/portfolio/big-item4.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>

</section>
<!--/#portfolio-->

Answer 1

我在你的代码中修复了一些东西:

• isotope 无法识别，所以我将其删除。

• 我将您搜索要隐藏\显示的项目的方式替换为:

  $('.portfolio-item').not(selector).hide();
$('.portfolio-item'+selector).show();


// portfolio filter
$portfolio_selectors = $('.portfolio-filter >li>a');
if($portfolio_selectors!='undefined'){
$portfolio = $('.portfolio-items');
/*
$portfolio.isotope({
itemSelector : '.col-sm-3',
layoutMode : 'fitRows'
});
*/

$portfolio_selectors.on('click', function(){
$portfolio_selectors.removeClass('active');
$(this).addClass('active');
var selector = $(this).attr('data-filter');

$('.portfolio-item').not(selector).hide();
$('.portfolio-item'+selector).show();

return false;
});
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="portfolio">
<div class="container">
<div class="row text-center">
<div class="col-sm-8 col-sm-offset-2">
<h2 class="title-one">Portfolio</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit.</p>
</div>
</div>
<ul class="portfolio-filter text-center">
<li><a class="btn btn-default active" href="#" data-filter="*">All</a></li>
<li><a class="btn btn-default" href="#" data-filter=".html">Html</a></li>
<li><a class="btn btn-default" href="#" data-filter=".wordpress">Wordpress</a></li>
<li><a class="btn btn-default" href="#" data-filter=".joomla">Joomla</a></li>
<li><a class="btn btn-default" href="#" data-filter=".megento">Megento</a></li>
</ul><!--/#portfolio-filter-->
<div class="portfolio-items">
<div class="col-sm-3 col-xs-12 portfolio-item html">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/our-team/bella.jpg" alt=""></div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<a href="#"><i class="fa fa-link"></i></a>
<a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 portfolio-item jooma">
<div class="view efffect" >
<div class="portfolio-image">
<img src="images/our-team/constance.jpg" alt="">
</div>
  <div class="mask text-center html">
    <h3>.html</h3>
    <h4> .html.html.html.html</h4>
    <a href="#"><i class="fa fa-link"></i></a>
    <a href="images/portfolio/big-item4.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
  </div>
  </div>
  </div>
  <div class="col-sm-3 col-xs-12 portfolio-item wordpress">
  <div class="view efffect">
  <div class="portfolio-image">
  <img src="images/our-team/francell.jpg" alt="">
  </div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<a href="#"><i class="fa fa-link"></i></a>
<a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 portfolio-item megento">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/portfolio/4.jpg" alt="">
</div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<a href="#"><i class="fa fa-link"></i></a>
<a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 portfolio-item html">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/portfolio/5.jpg" alt="">
</div> <div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<a href="#"><i class="fa fa-link"></i></a>
<a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 portfolio-item wordpress">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/portfolio/6.jpg" alt="">
</div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<a href="#"><i class="fa fa-link"></i></a>
<a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 portfolio-item html">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/portfolio/7.jpg" alt="">
</div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<a href="#"><i class="fa fa-link"></i></a>
<a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 portfolio-item joomla">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/portfolio/8.jpg" alt=""></div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<a href="#"><i class="fa fa-link"></i></a>
<a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 portfolio-item html">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/portfolio/9.jpg" alt="">
</div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<a href="#"><i class="fa fa-link"></i></a>
<a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 portfolio-item wordpress">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/portfolio/10.jpg" alt=""></div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<a href="#"><i class="fa fa-link"></i></a>
<a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 portfolio-item joomla">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/portfolio/11.jpg" alt=""></div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<a href="#"><i class="fa fa-link"></i></a>
<a href="images/portfolio/big-item3.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 portfolio-item megento">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/portfolio/12.jpg" alt=""></div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<a href="#"><i class="fa fa-link"></i></a>
<a href="images/portfolio/big-item4.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
</div>
</div>
</div>
</div>
</div>

</section> <!--/#portfolio-->