如何隐藏同位素中的 "all" 部分

Question

我对这个同位素有疑问，我想当你启动网站时，只显示文本 1，而不是像现在这样。我不知道怎么做，你能帮我吗？

// ISOTOPE FILTER
jQuery(document).ready(function($){

 if ( $('.iso-box-wrapper').length > 0 ) { 

     var $container  = $('.iso-box-wrapper'), 
      $imgs   = $('.iso-box img');



     $container.imagesLoaded(function () {

      $container.isotope({
    layoutMode: 'fitRows',
    itemSelector: '.iso-box'
      });

      $imgs.load(function(){
       $container.isotope('reLayout');
      })

     });
        

     //filter items on button click

     $('.filter-wrapper li a').click(function(){

         var $this = $(this), filterValue = $this.attr('data-filter');

   $container.isotope({ 
    filter: filterValue,
    animationOptions: { 
        duration: 750, 
        easing: 'linear', 
        queue: false, 
    }                
   });             

   // don't proceed if already selected 

   if ( $this.hasClass('selected') ) { 
    return false; 
   }

   var filter_wrapper = $this.closest('.filter-wrapper');
   filter_wrapper.find('.selected').removeClass('selected');
   $this.addClass('selected');

       return false;
     }); 

 }

});

这是我的代码html

<!-- portfolio section -->
<div id="portfolio">
    <div class="container">
        <div class="row">
            <div class="col-md-12 col-sm-12">
                <div class="title">
                    <h2>Regulations</h2>
                </div>
                <!-- ISO section -->
                <div class="iso-section">
                    <ul class="filter-wrapper clearfix">
                         <li><a href="#" class="opc-main-bg selected" data-filter=".regulation">Regulation</a></li>
                         <li><a href="#" class="opc-main-bg" data-filter=".regulation2">Regulation 2</a></li>
                         <li><a href="#" class="opc-main-bg" data-filter=".regulation3">Regulation 3</a></li>
                    </ul>
                    <div class="iso-box-section">
                        <div class="iso-box-wrapper col4-iso-box">

                             <div class="iso-box regulation">
                                 <h3>
                                     TEXT 1
                                 </h3>
                                 <br>

                            </div>
                            <div class="iso-box regulation2">
                                  <h3>
                                      this is TEXT 2
                                 </h3>  
                                <br>
                            </div>

                             <div class="iso-box regulation3">
                                  <h3>
                                     and there's TEXT 3
                                 </h3>  
                            </div>




                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

这是目前的情况。

这就是我想要的结果

There's my code JSfiddle

这段代码在这个网站上运行得不是很好，因为它需要额外的 JavaScript 才能像我希望的那样运行。

Answer 1

基本上，您希望在加载页面时过滤内容。因此，只需告诉第一次初始化 Isotope 以根据字符串过滤项目即可。

执行此操作的一种方法是将过滤器直接硬编码到您第一次调用 Isotope 时，但我建议获取可用过滤器的第一个值并使用它。如果您要添加或删除过滤器，这将允许您更改 HTML 而无需更改 JavaScript。

// ISOTOPE FILTER
jQuery(document).ready(function($) {

  if ($('.iso-box-wrapper').length > 0) {

    var $container = $('.iso-box-wrapper'),
      $imgs = $('.iso-box img'),
      $filters = $('.filter-wrapper li a');

    $container.imagesLoaded(function() {

      // Get the value of the first filter.
      var initialFilter = $filters.first().attr('data-filter');

      $container.isotope({
        filter: initialFilter,
        layoutMode: 'fitRows',
        itemSelector: '.iso-box',
      });

      $imgs.load(function() {
        $container.isotope('reLayout');
      })

    });


    //filter items on button click
    $filters.click(function() {

      var $this = $(this),
        filterValue = $this.attr('data-filter');

      $container.isotope({
        filter: filterValue,
        animationOptions: {
          duration: 750,
          easing: 'linear',
          queue: false,
        }
      });

      // don't proceed if already selected 

      if ($this.hasClass('selected')) {
        return false;
      }

      var filter_wrapper = $this.closest('.filter-wrapper');
      filter_wrapper.find('.selected').removeClass('selected');
      $this.addClass('selected');

      return false;
    });

  }

});

如何隐藏同位素中的 "all" 部分

How to hide "all" sections in isotope

javascript

html

css

jquery-isotope