mootools或jquery中的颜色切换器

这是我用来切换颜色的简单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，用于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;
    }
}

正如您所看到的，编辑太小了，如果我是您，我甚至不会费心实现它们。这也不会让你的网站更加面向未来。

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

---

正如您所看到的，编辑太小了，如果我是您，我甚至不会费心实现它们。这也不会让你的网站更加面向未来。

如果你想使用jQuery，请改变这一点

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

到

如果你想改变div的颜色

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

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

编辑：

---

这里有一个cookie的jQuery插件

，如果您想使用jQuery，请更改此插件

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

到

如果你想改变div的颜色

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

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

编辑：

---

这里您有一个cookie的jQuery插件

如果您的代码可以工作，为什么要放慢它的速度，将其转换为库代码，然后将其转换回您拥有的代码

如果这是您的代码的实际外观，您可以消除一些冗余：

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

---

如果你的代码可以工作，为什么要放慢速度，把它转换成库代码，这样就可以把它转换回你所拥有的东西

如果这是您的代码的实际外观，您可以消除一些冗余：

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

对于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），我会创建一个样式映射，并执行如下操作：

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

现代化是什么意思？嘿，patrick，我只需要知道如何在mootools或jquery中编写这些函数，并将我的项目代码建立在这些框架上，除非您的代码存在跨浏览器问题，或者您只需要减少很长代码中的字符，我不知道你为什么想用一个库来放慢速度。是的，你是对的，但我只需要这些基于jquery或mootoolsPerhaps的未来代码示例，我误解了你。你是说这不是你需要转换的实际代码吗？仅仅因为您在项目中使用jQuery/MooTools，并不意味着所有javascript都需要使用它们。转换到库会减慢代码的速度。抱歉，如果我没有抓住要点。现代化是什么意思？嘿，patrick，我只需要知道如何在mootools或jquery中编写这些函数，并将我的项目代码基于这些框架，除非您的代码存在跨浏览器问题，或者您只需要减少代码中的字符，或者只需要非常长的一段代码，我不知道你为什么想用一个库来放慢速度。是的，你是对的，但我只需要这些基于jquery或mootoolsPerhaps的未来代码示例，我误解了你。你是说这不是你需要转换的实际代码吗？仅仅因为您在项目中使用jQuery/MooTools，并不意味着所有javascript都需要使用它们。转换到库会减慢代码的速度。对不起，如果我没抓住重点。哇，你是上帝；我的脚本的缩小版太好了。我会用的。感谢他为style2参数编写style6.css。。。因此，我改变了主意：）@Dimitar-是的，我在回答中注意到了这一点：o） “style2正在将'style6'发送到setCookie（）。如果这是一个错误，并且它应该发送'style2'，您可以进一步减少它。”很公平，只是吹毛求疵。哇，您真是上帝；我的脚本的缩小版太好了。我会用的。感谢他为style2参数编写style6.css。。。因此，我改变了主意：）@Dimitar-是的，我在回答中注意到了这一点：o） “style2正在将'style6'发送到setCookie（）。如果这是一个错误，并且它应该发送'style2'，您可以进一步减少它。”很公平，只是吹毛求疵。