仅在单击排序按钮时

时间:2019-01-04 21:18:24

标签: javascript filter gallery onload isotope

现在,我的代码中有一些过滤器选项,当单击按钮时,它们可以正常工作。不幸的是,即使我将类设为“活动”,也无法在页面加载时使用适当的过滤器。加载页面时,即使我只希望包含在活动过滤器中的那些(在这种情况下,带有2018年标记的结果)也得到“全部”结果。

我尝试使用各种堆栈溢出,jsfiddle和github项目中的解决方案来解决该问题,但是我找不到合适的解决方案。

<!--  WORKS FILTER  -->
<div class="portfolio-filter font-alt align-center">
    <a href="#" class="" data-filter="*">All</a>
    <a href="#2018" class="active" data-filter=".2018">2018</a>
    <a href="#2017" class="" data-filter=".2017">2017</a>
    <a href="#2016" class="" data-filter=".2016">2016</a>
</div>




        <!-- Portfolio Gallery Grid -->
        <div id="grid" class="gallery-isotope grid-4 gutter clearfix">

        <!--  START 2018 ADVERTISEMENTS  -->
          <!-- Portfolio Item Start -->
          <div class="gallery-item 2018">
            <div class="thumb">
              <img class="img-fullwidth" src="images/advertisements/thumbs/2018/donato_hanover.jpg" alt="Donato Hanover">
              <div class="overlay-shade"></div>
              <div class="icons-holder">
                <div class="icons-holder-inner">
                  <div class="styled-icons icon-sm icon-dark icon-circled icon-theme-colored">
                    <a data-lightbox="image" href="images/advertisements/2018/donato_hanover.jpg"><i class="fa fa-plus"></i></a>
                    <!--<a href="#"><i class="fa fa-link"></i></a>-->
                  </div>
                </div>
              </div>
             <!--<a class="hover-link" data-lightbox="image" href="images/advertisements/2018/sebastian_k_2.jpg">View more</a>-->
            </div>
          </div>
          <!-- Portfolio Item End -->

这是2018年项目的一个示例,当然还有更多示例以及2017年,2016年等。2018年排序是活动的,但是在页面加载时会显示所有文件。当我单击2018过滤器按钮时,它确实可以工作,但我需要它在页面加载时完成。

0 个答案:

没有答案