javascript – 单击加载直到列表项时使DIV类处于非活动状态

2023年8月29日 166次阅读

我需要一些帮助,让我的网站上有一个投资组合.

目前我有所有图片(来自四个类别中的每一个)显示加载.但是,当我单击以激活该类别时,仅显示所选类别中的照片.

我想在网站加载时点击任何内容,或者没有任何照片加载或只加载一个指定类别的照片.

到目前为止我有这个：

            <ul class="simplefilter">
                <li class="active" data-filter="1"><p>BRIDAL</p></li>
                <li data-filter="2"><p>PHOTOSHOOT</p></li>
                <li data-filter="3"><p>LASHES</p></li>
                <li data-filter="4"><p>OTHER</p></li>
            </ul>

接下来是这样的：

               <div class="filtr-container">

               <!-- bridal photos -->

                    <div class="col s6 filtr-item col-pd" data-category="1">
                        <a href="img/portfolio/bridal/bridal_1.jpg" class="image-popup"><img class="responsive-img" src="img/portfolio/bridal/bridal_1.jpg" alt="sample image"></a>
                    </div>


                <!-- end bridal photos -->


                <!-- photoshoot photos -->

                    <div class="col s6 filtr-item col-pd" data-category="2">
                        <a href="img/portfolio/photoshoot/photoshoot_1.jpg" class="image-popup"><img class="responsive-img" src="img/portfolio/photoshoot/photoshoot_1.jpg" alt="sample image"></a>
                    </div>

                 <!-- end photoshoot photos -->


                 <!-- lashes photos -->

                    <div class="col s6 filtr-item col-pd" data-category="3">
                        <a href="img/portfolio/lashes/lashes_1.jpg" class="image-popup"><img class="responsive-img" src="img/portfolio/lashes/lashes_1.jpg" alt="sample image"></a>
                    </div>

                  <!-- end lashes photos -->


                  <!-- other photos -->

                    <div class="col s6 filtr-item col-pd" data-category="4">
                        <a href="img/portfolio/other/other_1.jpg" class="image-popup"><img class="responsive-img" src="img/portfolio/other/other_1.jpg" alt="sample image"></a>
                    </div>

                   <!-- end lashes photos -->
                   </div>

我的Javascript看起来像这样：

$(function(){
    'use-strict';

    $('.simplefilter li').load(function() {
    $('.filtr-container').removeClass('active');
    });

     // portfolio filter container
    $('.filtr-container').filterizr();

    // portfolio filter
    $('.simplefilter li').click(function() {
        $('.simplefilter li').removeClass('active');
        $(this).addClass('active');
    });

    // portfolio image-popup
    $(".image-popup").magnificPopup({
        type: "image",
        removalDelay: 300,
        mainClass: "mfp-fade"
    });

});

有什么想法吗？

提前致谢！

最佳答案 密钥似乎隐藏在您使用的filterizr插件中.

在调用$(‘…’).filterizer()构造函数的初始化时,您应该传递它过滤器参数：

$('.filtr-container').filterizr('filter', '1');
点赞