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

// ---关闭＆amp;去投资组合---- //

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

// ---关闭＆amp;围绕---- //

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

// ---关闭＆amp; Go Skills ---- //

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

// ---关闭＆amp;去联系---- //

$(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

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

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

为了缩短您的代码，我的建议是：

不要使用.classA，.classB，.classC，你不会为它们添加单独的css样式。而是将其更改为单个css类。这样你就不必使用
了
$('.classA, .classB, .classC').hide()

但只是

$('.one-class').hide(); // All elements with class 'one-class' will be hidden
如果您只想隐藏其他元素并只显示所选/单击的元素，则无需为每个元素添加ID。假设您要隐藏除被点击的元素之外的所有.close-nav元素，请使用以下代码：
```
$('.close-nav').click(function(){
    $('.close-nav').hide();
    $(this).show();

    // Other common code here
});
```

多功能几乎相同

4 个答案: