如何在同位素中隐藏“所有”剖面

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>      

这就是目前的情况。

​

这就是我想要的结果

​

这是我的代码JSfiddle

这个代码在这个网站上不能很好的工作，因为它需要额外的JavaScript才能像我想要的那样工作。

Answer 1

基本上，您希望在加载页面时过滤内容。所以，只要告诉第一次当你初始化同位素的时候，根据一个字符串过滤项目就可以了。

一种方法是在第一次调用同位素时直接对过滤器进行硬编码，但我建议获得可用过滤器的第一个值并使用它。如果要添加或删除筛选器，这将允许您更改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;
    });

  }

});