JavaScript精简

Question

嗨那里我正在开发客户端网站的交互性，我觉得像我的按钮功能的JS和carousel.fader窗口是有点冗余构建。有人可以看看这段代码，看看它是否可以更简化，以减少页面加载时间，真的只是清理JS。任何帮助是极大的赞赏。

function cycleImages(){ 
    $('.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 
     }); 
    }); 
} 

function cycleImages2(){ 
    $('.about-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 
     }); 
    }); 
} 

function cycleImages3(){ 
    $('.contact-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 
     }); 
    }); 
} 

function cycleImages4(){ 
    $('.sourcing-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',5).addClass('active');//make the next image the top one 
     }); 
    }); 
} 

function cycleImages5(){ 
    $('.consulting-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',5).addClass('active');//make the next image the top one 
     }); 
    }); 
} 

function cycleImages6(){ 
    $('.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',5).addClass('active');//make the next image the top one 
     }); 
    }); 
} 

$(document).ready(function(){ 
    $(".about-button").on("click", function(){ 
     $(".homepage-container").hide(); 
     $(".contact-container").removeClass("display-flex"); 
     $(".services-sourcing-container").removeClass("display-flex"); 
     $(".services-consulting-container").removeClass("display-flex"); 
     $(".services-installation-container").removeClass("display-flex"); 
     $(".about-container").addClass("display-flex"); 

    }); 

$(".home-button").on("click", function(){ 
     $(".homepage-container").show(); 
     $(".about-container").removeClass("display-flex"); 
     $(".services-sourcing-container").removeClass("display-flex"); 
     $(".services-consulting-container").removeClass("display-flex"); 
     $(".services-installation-container").removeClass("display-flex"); 
     $(".contact-container").removeClass("display-flex"); 
    }); 

$(".contact-button").on("click", function() { 
     $(".homepage-container").hide(); 
     $(".about-container").removeClass("display-flex"); 
     $(".services-sourcing-container").removeClass("display-flex"); 
     $(".services-consulting-container").removeClass("display-flex"); 
     $(".services-installation-container").removeClass("display-flex"); 
     $(".contact-container").addClass("display-flex"); 
    }) 

$(".sourcing-button").on("click", function() { 
     $(".homepage-container").hide(); 
     $(".about-container").removeClass("display-flex"); 
     $(".contact-container").removeClass("display-flex"); 
     $(".services-consulting-container").removeClass("display-flex"); 
     $(".services-installation-container").removeClass("display-flex"); 
     $(".services-sourcing-container").addClass("display-flex"); 
    }) 

$(".consulting-button").on("click", function() { 
     $(".homepage-container").hide(); 
     $(".about-container").removeClass("display-flex"); 
     $(".contact-container").removeClass("display-flex"); 
     $(".services-sourcing-container").removeClass("display-flex"); 
     $(".services-installation-container").removeClass("display-flex"); 
     $(".services-consulting-container").addClass("display-flex"); 
    }) 

$(".installation-button").on("click", function() { 
     $(".homepage-container").hide(); 
     $(".about-container").removeClass("display-flex"); 
     $(".contact-container").removeClass("display-flex"); 
     $(".services-sourcing-container").removeClass("display-flex"); 
     $(".services-consulting-container").removeClass("display-flex"); 
     $(".services-installation-container").addClass("display-flex"); 
    }) 

// run every 7s 
    setInterval('cycleImages()', 5000); 
    setInterval('cycleImages2()', 5000); 
    setInterval('cycleImages3()', 5000); 
    setInterval('cycleImages4()', 5000); 
    setInterval('cycleImages5()', 5000); 
    setInterval('cycleImages6()', 5000); 
}); 

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); 
});