Javascript 多功能几乎相同

有没有办法缩短这段代码？ 实际上，它所做的是检查一个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;
        }
        });
});

//---封闭式投资组合----//

//---关闭并继续----//

//---近距离移动技能----//

//---密切联系----//

---

是的，将所有类似的代码抽象成一个单独的函数，然后在每个单击函数中调用此函数。例如：

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

---

由于代码看起来完全相同，只需将选择器与逗号组合（这意味着匹配其中任何一个）：

---

就我所见，唯一的区别是它每次应用到的元素。您可以执行以下操作：

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

---

等等。

要缩短代码，我的建议如下：

不要使用.classA、.classB、.classC，因为您不会为它们添加单独的css样式。而是将其更改为单个css类。 这样，您就不必使用

$（'.classA、.classB、.classC'）.hide（）

但只是

$（'.one class'）.hide（）；//类为“一类”的所有元素都将隐藏

如果您只想隐藏其他元素并显示选中/单击的元素，则不需要向每个元素添加id。假设要隐藏所有

。请关闭nav

元素（单击的元素除外），使用以下代码：

$('.close-nav').click(function(){
    $('.close-nav').hide();
    $(this).show();

    // Other common code here
});

---

是的，将所有类似的代码抽象成一个单独的函数，然后在每个单击函数中调用此函数。这些函数都在单独的页面上吗？所有这些函数在哪里声明？@royok，否，它们都在同一页面上不同的高度位置。这是不可能的，因为每个类包含不同的内容

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

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

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

$('.close-nav').click(function(){
    $('.close-nav').hide();
    $(this).show();

    // Other common code here
});