Question

我遇到了麻烦：我有一个显示为滑块的div列表。我选择其中一些div与他们的班级只显示具体的日期。现在，我需要在列表中输出并且能够做同样的事情。我正在使用光滑的滑块。要输出列表，我会删除滑块。然后，当我点击我的日期时，它不会仅显示具有特定类的div，而是隐藏它们。这是我的代码： “

    <ul class="month">
        <li data-filter="201511" class="js-filter">november 2015</li>
        <li data-filter="201512" class="js-filter">decembre 2015</li>
        <li data-filter="201601" class="js-filter">January 2016</li>
        <li data-filter="201602" class="js-filter">February 2016</li>
        <li data-filter="201603" class="js-filter">March 2016</li>
        <li class="js-filter reset">All months</li>
    </ul>
<div class="carousel slick-initialized slick-slider" id="touslesvolsenslider">          
    <div class="slick-list draggable">
        <div class="slick-track">
            <div class="vol 201511 London slick-slide slick-cloned" data-slick-index="-4"></div>
            <div class="vol 201512 London slick-slide slick-cloned" data-slick-index="-4"></div>                
            <div class="vol 201602 London slick-slide slick-cloned" data-slick-index="-4"></div>
            <div class="vol 201603 London slick-slide slick-cloned" data-slick-index="-4"></div>
            <div class="vol 201511 Paris slick-slide slick-cloned" data-slick-index="-4"></div>
            <div class="vol 201512 Paris slick-slide slick-cloned" data-slick-index="-4"></div>
            <div class="vol 201603 Paris slick-slide slick-cloned" data-slick-index="-4"></div>
            <div class="vol 201602 Paris slick-slide slick-cloned" data-slick-index="-4"></div>
        </div>
    </div>
</div>

<script type="text/javascript" src="slick/slick.min.js"></script>
    <script>

        $('.carousel').slick({
            slidesToShow: 4,
            slidesToScroll: 4,
            infinite: true,
        });

        var filtered = false;

        $('.js-filter').on('click', function(){
            var customType = $( this ).data('filter');
            if (filtered === false) {
                $('.carousel').slick('slickFilter','.'+ customType);
                filtered = true;
            } else {
                $('.carousel').slick('slickFilter','.'+ customType);
                filtered = true;
            }
        });

        $('.reset').on('click', function(){
            $('.carousel').slick('slickUnfilter');
            $(this).text('Tous les mois');
            filtered = false;
        });

        $('.inlist').on('click', function(){
            var filtered = false;
            $('.carousel').slick('slickUnfilter');
            $('.carousel').slick('unslick');
            $('.js-filter').addClass('triervols');
            $('.js-filter').removeClass('js-filter');
        });

        $('.inslider').on('click', function(){
            $('.triervols').addClass('js-filter');
            $('.carousel').slick({
                slidesToShow: 4,
                slidesToScroll: 4,
                infinite: true,
            });
        });
    </script>'

在Jquery中选择带有类的div

0 个答案: