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"
    }    
};

当你应用它时，没有ifs，只是根据对象设置

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

试图避免重复，简化...创建全局变量并简化我的javascript - 纯js没有jquery

2 个答案: