[英]What is the correct way to write this javascript function?
我正在嘗試理解javascript和javascript函數。 此功能用於更改按鈕的外觀。
function changeButton(){
btn.style.backgroundColor = btn.style.backgroundColor == "black" ? "white" : "black";
btn.style.color = btn.style.color == "white" ? "black" : "white";
btn.innerHTML = btn.innerHTML == 'GOOD JOB' ? 'CLICK ME' : 'GOOD JOB';
}
它工作得很好。 但是當我看到這個功能時,我看到了很多重復。 基本結構似乎是element = element == value1 ? value2 : value1
element = element == value1 ? value2 : value1
所以我認為這應該有效:
function toggleValue(elem, val1, val2){
elem = elem == val1 ? val2 : val1
}
function changeButton(){
var x = btn.style.backgroundColor
var y = btn.style.color
var z = btn.innerHTML
toggleValue(x, 'white', 'black')
toggleValue(y, 'black', 'white')
toggleValue(z, 'CLICK ME', 'GOOD JOB')
}
但它不起作用,我不明白為什么。 有人能告訴我為什么這不起作用? 有沒有辦法讓它發揮作用?
它不起作用,因為您移交原始值而不是對屬性的引用。
function toggleValue(elem, prop, val1, val2){
elem[prop] = elem[prop] == val1 ? val2 : val1
}
function changeButton(){
toggleValue(btn.style, 'backgroundColor', 'white', 'black')
toggleValue(btn.style, 'color', 'black', 'white')
toggleValue(btn, 'innerHTML', 'CLICK ME', 'GOOD JOB')
}
因為您傳遞的是不可變的String 。
您可以再創建一個參數 - property 。
function toggleValue(elem, prop, val1, val2){
elem[prop] = elem[prop] == val1 ? val2 : val1
}
function changeButton(){
var x = btn.style;
var y = btn.style;
var z = btn;
toggleValue(x, "backgroundColor", 'white', 'black');
toggleValue(y, "color", 'black', 'white');
toggleValue(z, "innerHTML", 'CLICK ME', 'GOOD JOB');
}
function toggleValue(elem, val1, val2, ButtonStyleType) { elem = elem == val1 ? val2 : val1; if (ButtonStyleType == 'backgroundColor') btn.style.backgroundColor = elem; else if (ButtonStyleType == 'color') btn.style.color = elem; else if (ButtonStyleType == 'innerHtml') btn.innerHTML = elem; } function changeButton() { var x = btn.style.backgroundColor; var y = btn.style.color; var z = btn.innerHTML; toggleValue(x, 'green', 'yellow', 'backgroundColor'); toggleValue(y, 'black', 'Orange', 'color'); toggleValue(z, 'Default', 'GOOD JOB', 'innerHtml'); }
<button id="btn" style="background-color:green; color:black;">Default</button><br /> <br /> <a style="cursor:pointer;color:blue;" onclick="changeButton();">Click here to update button style</a>
您必須了解傳遞值與傳遞參考之間的區別, 以了解有關該點擊的更多信息
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.