Javascript 根据当前季节将过滤器设置为激活状态

我正试图让我的旋转木马的主动过滤器根据我们目前的季节变得主动

<ul id="our_projects">
            <li id="all_projects" class="active button-filter"><a href="">All Seasons</a></li>
            <li id="Spring" class="button-filter"><a href="">Spring</a></li>
            <li id="Summer" class="button-filter"><a href="">Summer</a></li>
            <li id="Autumn" class="button-filter"><a href="">Autumn</a></li>
            <li id="Winter" class="button-filter"><a href="">Winter</a></li>
</ul>

因此，如果月份是四月，季节将是春天，当页面加载时，旋转木马幻灯片将向用户呈现与该过滤器相关的幻灯片

我不知道该怎么做-任何帮助都将不胜感激

网站URL=（滚动至花园维护部分）

滑块正在使用平滑滑块

谢谢

---

Neil

与JS一起获取日期，计算季节，在相关元素中添加类？你是否被困在问题的某个特定部分？

function slickSlider() {
    if(j('.slick-our-projects').length) {
        j('.slick-our-projects').slick({
            dots: false,
            variableWidth: false,
            autoplay: false,
            arrows: false,
            centerMode: false,
            slidesToShow: 3,
            slidesToScroll: 1,
            responsive: [
                {
                    breakpoint: 1200,
                    settings: {
                        slidesToShow: 3,
                        slidesToScroll: 1,
                        centerMode: false,
                        variableWidth: false
                    }
                },
                {
                    breakpoint: 768,
                    settings: {
                        slidesToShow: 2,
                        slidesToScroll: 1,
                        centerMode: false,
                        variableWidth: false
                    }
                },
                {
                    breakpoint: 480,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1,
                        centerMode: false,
                        variableWidth: false
                    }
                }
            ]
        });
        
        var filtered = false;
        j('#our_projects .button-filter').on('click', function(){
            var filtername = j(this).attr('id');
            if (filtered === false) {
                j('.slick-our-projects').slick('slickUnfilter');
                j('.slick-our-projects').slick('slickFilter','.filter-' + filtername);
                j('#our_projects .button-filter').attr('class','button-filter');
                j(this).attr('class','active button-filter');
                return false;
            } else {
                j('.slick-our-projects').slick('slickUnfilter');
                j('.slick-our-projects').slick('slickFilter','.filter-' + filtername);
                j('.slick-our-projects').slickGoTo(0);
                j('#our_projects .button-filter').attr('class','button-filter');
                j(this).attr('class','active button-filter');
                filtered = false;
                return false;
            }
        });
    }
    
    if(j('.slick-our-projects-v2').length) {
        j('.slick-our-projects-v2').slick({
            dots: true,
            variableWidth: false,
            autoplay: true,
            infinite: true,
            arrows: false,
            slidesToShow: 4,
            slidesToScroll: 4,
            responsive: [
                {
                    breakpoint: 1220,
                    settings: {
                        slidesToShow: 4,
                        slidesToScroll: 4
                    }
                },
                {
                    breakpoint: 992,
                    settings: {
                        slidesToShow: 2,
                        slidesToScroll: 2
                    }
                },
                {
                    breakpoint: 480,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1
                    }
                }
            ]
        });
        
        var filtered = false;
        j('#our_projects .button-filter').on('click', function(){
            var filtername = j(this).attr('id');
            if (filtered === false) {
                j('.slick-our-projects-v2').slick('slickUnfilter');
                j('.slick-our-projects-v2').slick('slickFilter','.filter-' + filtername);
                j('#our_projects .button-filter').attr('class','button-filter');
                j(this).attr('class','active button-filter');
                return false;
            } else {
                j('.slick-our-projects-v2').slick('slickUnfilter');
                j('.slick-our-projects-v2').slick('slickFilter','.filter-' + filtername);
                j('.slick-our-projects-v2').slickGoTo(0);
                j('#our_projects .button-filter').attr('class','button-filter');
                j(this).attr('class','active button-filter');
                filtered = false;
                return false;
            }
        });
    }
}

var date=new Date();
    var month=new Array();
    month[0]="January";
    month[1]="February";
    month[2]="March";
    month[3]="April";
    month[4]="May";
    month[5]="June";
    month[6]="July";
    month[7]="August";
    month[8]="September";
    month[9]="October";
    month[10]="November";
    month[11]="December";
    var n = month[date.getMonth()];
    
    if(((n === 'January') || (n === 'February') || (n === 'March'))){
        jQuery('#Spring').removeClass('active');
        jQuery('#all_projects').removeClass('active');
        jQuery('#Summer').removeClass('active');
        jQuery('#Autumn').removeClass('active');
        jQuery('#Winter').addClass('active');
    };
    
    if(((n === 'April') || (n === 'May') || (n === 'June'))){
        jQuery('#Winter').removeClass('active');
        jQuery('#all_projects').removeClass('active');
        jQuery('#Summer').removeClass('active');
        jQuery('#Autumn').removeClass('active');
        jQuery('#Spring').addClass('active');
    };
    
    if(((n === 'July') || (n === 'August') || (n === 'September'))){
        jQuery('#Winter').removeClass('active');
        jQuery('#all_projects').removeClass('active');
        jQuery('#Spring').removeClass('active');
        jQuery('#Autumn').removeClass('active');
        jQuery('#Summer').addClass('active');
    };

    if(((n === 'October') || (n === 'November') || (n === 'December'))){
        jQuery('#Winter').removeClass('active');
        jQuery('#all_projects').removeClass('active');
        jQuery('#Spring').removeClass('active');
        jQuery('#Summer').removeClass('active');
        jQuery('#Autumn').addClass('active');
    };