javascript - 编写此 javascript 函数的正确方法是什么？

Question

我正在尝试理解 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 ？值 2 : 值 1

所以在我看来这应该可行:

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

但它不起作用，我不明白为什么。有人可以告诉我为什么这不起作用吗？有没有办法让它发挥作用？

Answer 1

它不起作用，因为您传递的是原始值而不是对属性的引用。

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