Question

以下是我的javascript代码，有没有更好的方法来编写我的代码？我认为我的概念并不好。'$'代表'document.getElementById'，为了更好地查看我使用'$'，代码是JavaScript而不是JQuery。

function() {
    if (1) {
        $("AprEmail1").style.display = "";
        $("chkApp1").style.display = "";
        $("AprEmail2").style.display = "";
        $("chkApp2").style.display = "";
        $("chkApp2").disabled = false;
        $("AprEmail3").style.display = "";
        $("chkApp3").style.display = "";
        $("chkApp3").disabled = false;
    }
    else if (2) {
        $("AprEmail1").style.display = "";
        $("chkApp1").style.display = "";
        $("AprEmail2").style.display = "";
        $("chkApp2").style.display = "";
        $("chkApp2").disabled = true;
        $("AprEmail3").style.display = "";
        $("chkApp3").style.display = "";
    }
    else if (3) {
        $("AprEmail1").style.display = "";
        $("chkApp1").style.display = "";
        $("AprEmail2").style.display = "";
        $("chkApp2").style.display = "";
        $("chkApp2").disabled = true;
        $("AprEmail3").style.display = "";
        $("chkApp3").style.display = "";
        $("chkApp3").disabled = true;
    }
    else {
        $("AprEmail1").style.display = "none";
        $("chkApp1").style.display = "none";
        $("AprEmail2").style.display = "none";
        $("chkApp2").style.display = "none";
        $("AprEmail3").style.display = "none";
        $("chkApp3").style.display = "none";
    }
}

Answer 1

是的，还有更好的方法。根据您正在应用的谓词，使用元素上的类值来对应它们的关系，然后让代码按类而不是id运行。

如果您通过在某些父元素上设置类（基于条件）来处理这些不同的条件，您可以主要使用CSS执行此操作，例如<body>标记。然后，您可以使用看起来像

的CSS规则

.condition1 .hidden-when-1 { display: none; }

.condition2 .hidden-when-2 { display: none; }

等等。当<body>标记具有类“condition1”时，将隐藏所有具有“hidden-when-1”类的元素。

Answer 2

您可以将它们分组为div容器，然后显示并隐藏div。这将使它更清洁。此外，您可以查看Jquery。它允许您编写更清晰的代码。

JavaScript代码优化

2 个答案: