JavaScript精简

Question

您好我正在开发客户端站点的交互性，我觉得我的按钮功能的JS和carousel.fader窗口构建有点冗余。有人可以看看这个代码，看看它是否可以简化，以减少页面加载时间，真的只是为了清理JS。非常感谢任何帮助。

api.search('example').then(res => {
  ...do some stuff...
 }, err => {
    console.log('2') // Still doesn't run
    throw err
 })

Answer 1

您可以像在CSS中一样链选择选择器：jQuery Multiple selector documentation。

另外，您指出setInterval必须每7秒运行一次（在评论中），使用5000（5秒）进行设置：所以我在下面的代码中对其进行了更改。

所以你的代码看起来像这样：

function cycleImages(){
    $('.fader, .about-fader, .contact-fader, .sourcing-fader, .consulting-fader, .installation-fader').each(function(){
        var $active = $(this).find('.active');
        var $next = ($(this).find('.active').next().length > 0) ? $(this).find('.active').next() : $(this).find('img:first');
        $next.css('z-index',2);//move the next image up the pile
        $active.fadeOut(1500,function(){//fade out the top image
            $active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
            $next.css('z-index',7).addClass('active');//make the next image the top one
        });
    });
}

$(document).ready(function(){
    $(".about-button, .home-button, .contact-button, .sourcing-button, .consulting-button, .installation-button").on("click", function(){
        if($(this).hasClass("about-button")) {
            $(".about-container").addClass("display-flex");
        } else {
            $(".about-container").removeClass("display-flex");
        }

        if($(this).hasClass("home-button")) {
            $(".homepage-container").show();
        } else {
            $(".homepage-container").hide();
        }

        if($(this).hasClass("contact-button")) {
            $(".contact-container").addClass("display-flex");
        } else {
            $(".contact-container").removeClass("display-flex");
        }

        if($(this).hasClass("sourcing-button")) {
            $(".services-sourcing-container").addClass("display-flex");
        } else {
            $(".services-sourcing-container").removeClass("display-flex");
        }

        if($(this).hasClass("consulting-button")) {
            $(".services-consulting-container").addClass("display-flex");
        } else {
            $(".services-consulting-container").addClass("display-flex");
        }

        if($(this).hasClass("installation-button")) {
            $(".services-installation-container").addClass("display-flex");
        } else {
            $(".services-installation-container").addClass("display-flex");
        }
    });

    // run every 7s
    setInterval('cycleImages()', 7000);
});