Переподлючить stylesheet + сохранить настройки в cookie
Здравствуйте!
Для демонстрации цветовых схем шаблона, нужно сделать переподключение 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">');
}
Источник: Stack Overflow на русском