Question

这是我简单的javascript函数来切换颜色并且它工作正常，但是我需要在我的网站中启用jquery或mootools然后更好地使这个功能现代化

function changeThemeColor(color)
{
    switch(color)
    {
        case "style1":
        default:
            document.getElementById('CSSfile').href = 'css/style1.css';
            setCookie('ThemeColor','style1',7);
            break;
        case "style2":
            document.getElementById('CSSfile').href = 'css/style2.css';
            setCookie('ThemeColor','style6',7);
            break;
    }
}

我知道这可能是一个巨大的任务，但我真的需要将此代码转换为jquery或mootools

Answer 1

对于MooTools：

function changeThemeColor(color)
{
    switch(color)
    {
        case "style1":
        default:
            $('CSSfile').set('href','css/style1.css');
            Cookie.write('ThemeColor','style1',{'duration':7});
            break;
        case "style2":
            $('CSSfile').set('href','css/style2.css');
            Cookie.write('ThemeColor','style6',{'duration':7});
            break;
    }
}

正如你所看到的，编辑是如此之小，如果我是你，我甚至都不愿意实施它们。这也不会让你的网站更具前瞻性。

Answer 2

如果你想使用jQuery改变这个

document.getElementById('CSSfile').href = 'css/style1.css';

到

$("#CSSfile").attr("href",'css/style1.css');

如果你想改变div的颜色是

$("#divId").css("color","#f0f0f0")

对不起我的英语，我来自阿根廷

编辑： http://plugins.jquery.com/project/Cookie 这里有一个cookie的jQuery插件

Answer 3

如果您的代码有效，为什么要将它转换为库代码，以便将其转换回您所拥有的代码？

如果这实际上是您的代码的样子，您可以摆脱一些冗余：

function changeThemeColor(color) {
    document.getElementById('CSSfile').href = 'css/' + color + '.css';
    switch(color) {
        case "style1":
        default:
            setCookie('ThemeColor','style1',7);
            break;
        case "style2":
            setCookie('ThemeColor','style6',7);
            break;
    }
}

style2正在向'style6'发送setCookie()。如果这是一个错误，它应该发送'style2'，你可以进一步减少它。

function changeThemeColor(color) {
    document.getElementById('CSSfile').href = 'css/' + color + '.css';
    setCookie('ThemeColor', color, 7);
}

Answer 4

对于mootools（或者实际上是jquery），我会创建一个样式地图，并执行以下操作：

var changeThemeColor = function(colour) {
    var colours = { // set your mapping here.
        style1: "style1",
        style2: "style6"
    }, style = colours[colour] || colours['style1']; // default to style1 if not mapped

    document.id("CSSfile").set("href", "css/"+style+ ".css");
    Cookie.write("ThemeColor", style, {
        duration: 7,
        path: "/"
    });
};

尝试使其更加模块化/基于模式，以便将来可以轻松支持添加新样式。最好的方法是通过options var作为第二个参数来覆盖（外部）默认映射，并在内部执行Object.merge()。

mootools或jquery中的颜色切换器

4 个答案: