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