Переподлючить stylesheet + сохранить настройки в cookie

Рейтинг: 0Ответов: 1Опубликовано: 07.04.2015

Здравствуйте!

Для демонстрации цветовых схем шаблона, нужно сделать переподключение css файлов в head (нажал на кнопку - подключился новый файл стилей, а предыдущий удалился или отключился) и настройки сохранились в cookie.

Есть код, он работает при переключении световых схем, но очень громоздкий (хотел бы его сократить), потому что таких схем 20 штук + неправильно работают cookie - сохраняют только последний добавленный файл.

Пожалуйста, помогите решить проблему.

HTML структура (при нажатии на li подключается нужный файл стилей):

<div class="js_color-scheme">
    <div>Цвет</div>
    <ul >
        <li class="color_2A6F66"></li>
        <li class="color_3E94B2"></li>
        <li class="color_3F4B6E"></li>
        <li class="color_7C5469"></li>
        <li class="color_282c2f"></li>
        <li class="color_564C6E"></li>
        <li class="color_685A44"></li>
        <li class="color_809D75"></li>
        <li class="color_34233F"></li>
        <li class="color_77758D"></li>
        <li class="color_264566"></li>
        <li class="color_577038"></li>
        <li class="color_858585"></li>
        <li class="color_B24D1B"></li>
        <li class="color_B5654B"></li>
        <li class="color_B23831"></li>
        <li class="color_BB9E8E"></li>
        <li class="color_BD6578"></li>
        <li class="color_C49A1C"></li>
        <li class="color_C54B54"></li>
        <li class="color_E1B52D"></li>
    </ul>
</div>

jQuery (и так 20 раз =)

$('.color_2A6F66').click(function() {
    $('head').append('<link rel="stylesheet" type="text/css" href="http://site.com/templates/template-name/css/color-scheme/color_2A6F66.css">');
    $('link[href="http://site.com/templates/template-name/css/color-scheme/color_3E94B2.css"]').prop('disabled', true);
    $('link[href="http://site.com/templates/template-name/css/color-scheme/color_3F4B6E.css"]').prop('disabled', true);
    $('link[href="http://site.com/templates/template-name/css/color-scheme/color_7C5469.css"]').prop('disabled', true);
    $('link[href="http://site.com/templates/template-name/css/color-scheme/color_282c2f.css"]').prop('disabled', true);
    $('link[href="http://site.com/templates/template-name/css/color-scheme/color_564C6E.css"]').prop('disabled', true);
    $('link[href="http://site.com/templates/template-name/css/color-scheme/color_685A44.css"]').prop('disabled', true);
    $('link[href="http://site.com/templates/template-name/css/color-scheme/color_809D75.css"]').prop('disabled', true);
    $('link[href="http://site.com/templates/template-name/css/color-scheme/color_34233F.css"]').prop('disabled', true);
    $('link[href="http://site.com/templates/template-name/css/color-scheme/color_77758D.css"]').prop('disabled', true);
    $('link[href="http://site.com/templates/template-name/css/color-scheme/color_577038.css"]').prop('disabled', true);
    $('link[href="http://site.com/templates/template-name/css/color-scheme/color_858585.css"]').prop('disabled', true);
    $('link[href="http://site.com/templates/template-name/css/color-scheme/color_B24D1B.css"]').prop('disabled', true);
    $('link[href="http://site.com/templates/template-name/css/color-scheme/color_B5654B.css"]').prop('disabled', true);
    $('link[href="http://site.com/templates/template-name/css/color-scheme/color_B23831.css"]').prop('disabled', true);
    $('link[href="http://site.com/templates/template-name/css/color-scheme/color_BB9E8E.css"]').prop('disabled', true);
    $('link[href="http://site.com/templates/template-name/css/color-scheme/color_BD6578.css"]').prop('disabled', true);
    $('link[href="http://site.com/templates/template-name/css/color-scheme/color_C49A1C.css"]').prop('disabled', true);
    $('link[href="http://site.com/templates/template-name/css/color-scheme/color_C54B54.css"]').prop('disabled', true);
    $('link[href="http://site.com/templates/template-name/css/color-scheme/color_E1B52D.css"]').prop('disabled', true);
    $.cookie('js_activeColor-1', 'activeClass-1'); 
});

if ($.cookie('js_activeColor-1') == 'activeClass-1') {
    $('head').append('<link rel="stylesheet" type="text/css" href="http://site.com/templates/template-name/css/color-scheme/color_2A6F66.css">');
}


$('.color_3E94B2').click(function() {
    $('head').append('<link rel="stylesheet" type="text/css" href="http://site.com/templates/template-name/css/color-scheme/color_3E94B2.css">');
    $('link[href="http://site.com/templates/template-name/css/color-scheme/color_2A6F66.css"]').prop('disabled', true);
    $('link[href="http://site.com/templates/template-name/css/color-scheme/color_3F4B6E.css"]').prop('disabled', true);
    $('link[href="http://site.com/templates/template-name/css/color-scheme/color_7C5469.css"]').prop('disabled', true);
    $('link[href="http://site.com/templates/template-name/css/color-scheme/color_282c2f.css"]').prop('disabled', true);
    $('link[href="http://site.com/templates/template-name/css/color-scheme/color_564C6E.css"]').prop('disabled', true);
    $('link[href="http://site.com/templates/template-name/css/color-scheme/color_685A44.css"]').prop('disabled', true);
    $('link[href="http://site.com/templates/template-name/css/color-scheme/color_809D75.css"]').prop('disabled', true);
    $('link[href="http://site.com/templates/template-name/css/color-scheme/color_34233F.css"]').prop('disabled', true);
    $('link[href="http://site.com/templates/template-name/css/color-scheme/color_77758D.css"]').prop('disabled', true);
    $('link[href="http://site.com/templates/template-name/css/color-scheme/color_577038.css"]').prop('disabled', true);
    $('link[href="http://site.com/templates/template-name/css/color-scheme/color_858585.css"]').prop('disabled', true);
    $('link[href="http://site.com/templates/template-name/css/color-scheme/color_B24D1B.css"]').prop('disabled', true);
    $('link[href="http://site.com/templates/template-name/css/color-scheme/color_B5654B.css"]').prop('disabled', true);
    $('link[href="http://site.com/templates/template-name/css/color-scheme/color_B23831.css"]').prop('disabled', true);
    $('link[href="http://site.com/templates/template-name/css/color-scheme/color_BB9E8E.css"]').prop('disabled', true);
    $('link[href="http://site.com/templates/template-name/css/color-scheme/color_BD6578.css"]').prop('disabled', true);
    $('link[href="http://site.com/templates/template-name/css/color-scheme/color_C49A1C.css"]').prop('disabled', true);
    $('link[href="http://site.com/templates/template-name/css/color-scheme/color_C54B54.css"]').prop('disabled', true);
    $('link[href="http://site.com/templates/template-name/css/color-scheme/color_E1B52D.css"]').prop('disabled', true);
    $.cookie('js_activeColor-2', 'activeClass-2'); 
});

if ($.cookie('js_activeColor-2') == 'activeClass-2') {
    $('head').append('<link rel="stylesheet" type="text/css" href="http://site.com/templates/template-name/css/color-scheme/color_3E94B2.css">');
}

Ответы

Ответов пока нет.