多功能幾乎相同

Question

有沒有機會縮短此代碼？ 實際上，它所做的是檢查div（類）是否打開，是否關閉以及每個btn AKA（＃go + A，B，C，D）是否到達HTML代碼上的特定位置

//--- Close & Go Home----//
$(document).ready(function(){ 
    var MycloseNav = $("#go"),
        ProjShow = $(".content_projectA, .content_projectB, .content_projectC, .content_projectD, .content_projectE, .content_projectF, .content_projectG, .content_projectH, .content_projectI, .content_projectJ, .content_projectK, .content_projectL"),
        MyProjShow = ProjShow.hide();

    $("#go").on("click", function(){
        if (ProjShow == MyProjShow)
        {
        ProjShow.hide();
        $('html,body').animate({scrollTop: 400}, 200);
        $("#about, #skills, #contact, #footer").show();
        $("navA").hide();
        }
        else{
        return false;
        }
        });
});

//-關閉並開始投資組合---- //

$(document).ready(function(){ 
    var MycloseNav = $("#goA"),
        ProjShow = $(".content_projectA, .content_projectB, .content_projectC, .content_projectD, .content_projectE, .content_projectF, .content_projectG, .content_projectH, .content_projectI, .content_projectJ, .content_projectK, .content_projectL"),
        MyProjShow = ProjShow.hide();  
    $("#goA").on("click", function(){
        if (ProjShow == MyProjShow)
        {
        ProjShow.hide();
        $('html,body').animate({scrollTop: 400}, 200);
        $("#about, #skills, #contact, #footer").show();
        $("navA").hide();
        }
        else{
        return false;
        }
        });
});

//-關閉並繼續瀏覽---- //

$(document).ready(function(){ 
    var MycloseNav = $("#goB"),
        ProjShow = $(".content_projectA, .content_projectB, .content_projectC, .content_projectD, .content_projectE, .content_projectF, .content_projectG, .content_projectH, .content_projectI, .content_projectJ, .content_projectK, .content_projectL"),
        MyProjShow = ProjShow.hide();

    $("#goB").on("click", function(){
        if (ProjShow == MyProjShow)
        {
        ProjShow.hide();
        $('html,body').animate({scrollTop: 400}, 200);
        $("#about, #skills, #contact, #footer").show();
        $("navA").hide();
        }
        else{
        return false;
        }
        });
});

//-關閉和前進技能---- //

$(document).ready(function(){ 
    var MycloseNav = $("#goC"),
        ProjShow = $(".content_projectA, .content_projectB, .content_projectC, .content_projectD, .content_projectE, .content_projectF, .content_projectG, .content_projectH, .content_projectI, .content_projectJ, .content_projectK, .content_projectL"),
        MyProjShow = ProjShow.hide();

    $("#goC").on("click", function(){
        if (ProjShow == MyProjShow)
        {
        ProjShow.hide();
        $('html,body').animate({scrollTop: 400}, 200);
        $("#about, #skills, #contact, #footer").show();
        $("navA").hide();
        }
        else{
        return false;
        }
        });
});

//-關閉並聯系------ /

$(document).ready(function(){ 
    var MycloseNav = $("#goD"),
        ProjShow = $(".content_projectA, .content_projectB, .content_projectC, .content_projectD, .content_projectE, .content_projectF, .content_projectG, .content_projectH, .content_projectI, .content_projectJ, .content_projectK, .content_projectL"),
        MyProjShow = ProjShow.hide();

    $("#goD").on("click", function(){
        if (ProjShow == MyProjShow)
        {
        ProjShow.hide();
        $('html,body').animate({scrollTop: 400}, 200);
        $("#about, #skills, #contact, #footer").show();
        $("navA").hide();
        }
        else{
        return false;
        }
        });
});

Answer 1

是的，將所有相似的代碼抽象到一個單獨的函數中，然后在每個click函數中調用此函數。 例：

function similar(){
    if (ProjShow == MyProjShow)
        {
        ProjShow.hide();
        $('html,body').animate({scrollTop: 400}, 200);
        $("#about, #skills, #contact, #footer").show();
        $("navA").hide();
        }
        else{
        return false;
        }
        });
}
$("#goA").on("click", function(){
    similar();
});

Answer 2

由於代碼看起來相同，只需將選擇器與逗號結合（這意味着匹配其中的任何一個）：

$(document).ready(function(){ 
    var MycloseNav = $("#go, #goA, #goC, #goD"),

Answer 3

據我所知，唯一的區別是元素每次都適用。 您可以執行以下操作：

function init(id){ 
    var MycloseNav = $("#" + id),
        ProjShow = $(".content_projectA, .content_projectB,     .content_projectC, .content_projectD, .content_projectE, .content_projectF, .content_projectG, .content_projectH, .content_projectI, .content_projectJ, .content_projectK, .content_projectL"),
        MyProjShow = ProjShow.hide();

    $("#" + id).on("click", function(){
        if (ProjShow == MyProjShow)
        {
            ProjShow.hide();
            $('html,body').animate({scrollTop: 400}, 200);
            $("#about, #skills, #contact, #footer").show();
            $("navA").hide();
        }
        else{
            return false;
        }
    });
});

然后，對於每個文檔，就緒函數具有：

$(document).ready(function(){ 
    init("go");
});

$(document).ready(function(){ 
    init("goA");
});

$(document).ready(function(){ 
    init("goB");
});

等等。

Answer 4

為了縮短您的代碼，以下是我的建議：

1. 不要使用.classA，.classB，.classC，因為它們不會為它們添加單獨的CSS樣式。 而是將其更改為單個CSS類。 這樣，您將不必使用

   $('.classA, .classB, .classC').hide()

   只是

   $('.one-class').hide(); // All elements with class 'one-class' will be hidden

2. 如果您只想隱藏其他元素並僅顯示選定/單擊的元素，則無需為每個元素添加id。 假設您要隱藏除單擊的元素之外的所有.close-nav元素，請使用以下代碼：

    $('.close-nav').click(function(){ $('.close-nav').hide(); $(this).show(); // Other common code here });