Переключатель цвета в Mootools ИЛИ JQuery

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 (или, действительно, 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().

Answer 2

Если вы хотите использовать jQuery, измените это

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

на

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

, и если вы хотите изменить цвет с div, то это

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

Извините за мой английский, я из Аргентины

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

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

Как видите, правки настолько малы, что я бы даже не стал их реализовывать на вашем месте. Это не сделает ваш сайт более перспективным.