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

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

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

Answer 2

因为您传递不可变的字符串。

您可以再创建一个参数 - 属性。

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

Answer 3

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 4

您必须了解传递值与传递参考之间的区别 to know more about that click here

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

4 个答案: