如何縮短長重復路徑並合並語句

Question

對於一個網站，我使用9種不同外觀的標簽，這些標簽用於不同的情況。 一切都很好，但是我認為路徑和語句使用了很多函數，我認為它們可能會短很多。 一個例子：

function tabAon() {
    tabAvoor=tabAvoor+1;
    tabDrawer=tabDrawer+1;
    tabBvoor=0;
    tabCvoor=0;
    window.document.getElementById("tabA").style.textDecoration="none"; 
    window.document.getElementById("tabB").style.backgroundPosition="-87px -228px";
    window.document.getElementById("tabB").style.color="#898f92";
    window.document.getElementById("tabC").style.backgroundPosition="-190px -228px";
    window.document.getElementById("tabC").style.color="#898f92";
    window.document.getElementById("tabA").style.cursor="pointer";
    if (tabDrawer==0) {
        window.document.getElementById("header").MozTransform="translateY(0px)";
        window.document.getElementById("header").msTransform="translateY(0px)";
        window.document.getElementById("header").OTransform="translateY(0px)";
        window.document.getElementById("header").WebkitTransform="translateY(0px)";
        window.document.getElementById("header").transform="translateY(0px)";
        window.document.getElementById("tabA").style.color="#898f92";
        window.document.getElementById("tabA").style.backgroundPosition="0px 0px";
    }
    if (tabDrawer==1) {
        window.document.getElementById("header").style.MozTransform="translateY(36px)";
        window.document.getElementById("header").style.msTransform="translateY(36px)";
        window.document.getElementById("header").style.OTransform="translateY(36px)";
        window.document.getElementById("header").style.WebkitTransform="translateY(36px)";
        window.document.getElementById("header").style.transform="translateY(36px)";
        window.document.getElementById("tabAout").style.visibility="visible";
        window.document.getElementById("tabBout").style.visibility="hidden";
        window.document.getElementById("tabCout").style.visibility="hidden";
        window.document.getElementById("tabA").style.color="#000000";
        window.document.getElementById("tabA").style.backgroundPosition="0px -114px";
    }
    if (tabAvoor==2) tabAvoor=1;
    if (tabDrawer==2 && tabBvoor==0 && tabCvoor==0) tabDrawer=0;
    if (tabDrawer==2 && tabBvoor==1 || tabCvoor==1) tabDrawer=1;
}

Answer 1

那么使用JS框架呢？ 例如： jQuery

例：

 $('#tabBout').show();

而不是window.document.getElementById（“ tabAout”）。style.visibility =“ visible”;

Answer 2

您可以通過為不同的ID定義變量來稍微縮短代碼：

var tabA = window.document.getElementById("tabA");
// window.document.getElementById("tabA").style.textDecoration="none";
tabA.style.textDecoration="none";

Answer 3

首先，您應該嘗試使用某些版本的jQuery超酷的“ $（）”函數，以縮短所有這些“ window.document.getElementById”，即：

function $(id)
{
   return window.document.getElementById(id);
}

然后，您可以執行以下操作：

$("header").style.MozTransform="translateY(36px)";

（順便說一句：$（）還可以做很多其他的事情，即返回對象的整個數組……我在這里寫的版本只是一個例子）

而且，您可以使用一些功能來減少代碼量，例如：

function set_transforms(id,pos)
{
   $(id).MozTransform="translateY("+pos+"px)";
   $(id).msTransform="translateY("+pos+"px)";
   $(id).OTransform="translateY("+pos+"px)";
   $(id).WebkitTransform="translateY("+pos+"px)";
   $(id).transform="translateY("+pos+"px)";
}

因此，您可以替換所有這些：

window.document.getElementById("header").style.MozTransform="translateY(36px)";
        window.document.getElementById("header").style.msTransform="translateY(36px)";
        window.document.getElementById("header").style.OTransform="translateY(36px)";
        window.document.getElementById("header").style.WebkitTransform="translateY(36px)";
        window.document.getElementById("header").style.transform="translateY(36px)";

只是這樣：

set_transforms("header",36);

希望能幫助到你！