試圖避免重複，簡化...創建全局變量，並簡化我的JavaScript - 純js沒有jquery

Question

function changeColor() { 
    var $ = document.getElementById.bind(document); 
    var cp = $('colorPicker'); 
    var ct = $('col_text'); 
    var cmess = $('colorMsg'); 
    var cpback = $('colorPicker_back'); 
    var rap = $('wrap'); 
    var newColor = cp.value; 

//我想做出上述全球...或者如果有另一種方式來寫這個我很樂意看到。 $（'col_text'）。style.color = newColor;

if (newColor == "none") { 
     ct.innerHTML = "choose"; 
     cpback.value = "salmon"; 
     cmess.style.background = "#fff"; 
     rap.style.background = "#ddd"; 
     return this; 
    } else if (newColor == "yellow") { 
     ct.innerHTML = "yellow"; 
     cpback.value = "salmon"; 
     cmess.style.background = "salmon"; 
     rap.style.background = "#ccc"; 

     return this; 
    } else if (newColor == "red") { 
     ct.innerHTML = "red"; 
     cpback.value = "yellow"; 
     cmess.style.background = "yellow"; 
     rap.style.background = "#eee"; 
     return this; 
    } else if (newColor == "white") { 
     ct.innerHTML = "white"; 
     cpback.value = "violet"; 
     cmess.style.background = "violet"; 
     rap.style.background = "#ea0"; 
     return this; 
    } 
} 

function changeBack() { 

    var backgrnd = document.getElementById('colorPicker_back').value; 
    document.getElementById('colorMsg').style.background = backgrnd; 

    if (backgrnd == "none") 

    { 
     document.getElementById('col_text').style.color = "#000"; 
     document.getElementById('col_text').innerHTML = "choose"; 
     //document.getElementById('col_text').style.color="white"; 
     return this; 
    } else if (backgrnd == "yellow") 

    { 

     document.getElementById('col_text').style.color = "red"; 
     //document.getElementById('col_text').style.color="white"; 
     return this; 
    } else { 
     document.getElementById('col_text').innerHTML = "choose"; 
     return this; 
    } 
} 

//這需要簡化，但我正在努力如何做到這一點。

Answer 1

var $ = document.getElementById; 

問題是你如何保存/調用這個函數。當調用一個函數時，this的值是根據它的調用方式設置的。

getElementById預計this是document（當您做document.getElementById時設置）。當您撥打$時，沒有上下文，因此getElementById不起作用（this將爲window）。

試試這個：

var $ = document.getElementById.bind(document); 

這將迫使this是document。

Answer 2

就我個人而言，我不會使用$，你只是在問什麼庫正在使用中的混淆。

，而不是綁定，你可以有一個函數

function byId (id) { 
    return document.getElementById(id); 
} 

對象是你的朋友保存數據，避免嵌套if。簡單的查找並應用這些值。

var colorSettings = { 
    "none" : { 
     "col_text" : "choose", 
     "colorPicker_back" : "salmon", 
     "colorMsg" : "#fff", 
     "wrap" : "#fff" 
    },  
    "yellow" : { 
     "col_text" : "XXX", 
     "colorPicker_back" : "XXX", 
     "colorMsg" : "#XXX", 
     "wrap" : "#XXX" 
    }, 
    "red" : { 
     "col_text" : "YYY", 
     "colorPicker_back" : "YYY", 
     "colorMsg" : "#YYY", 
     "wrap" : "#YYY" 
    }  
}; 

，當你運用它，沒有如果，只是設定基於對象

function changeColor() { 
    var newColor = byId('colorPicker').value; 
    var data = colorSettings[newColor]; 
    byId('col_text').innerHTML = data.col_text; 
    byId('colorPicker_back').value = data.colorPicker_back; 
    byId('colorMsg').style.background = data.colorMsg; 
    byId('wrap').style.background = data.wrap; 
}