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

218

12 декабря 2016, 10:07

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

Для демонстрации цветовых схем шаблона, нужно сделать переподключение 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">');
}

Answer 1

Запомни: если ты при написании программы занимаешься тем что копируешь одни и те же части кода - ты занимаешься явно не программированием. Более того - со временем у тебя должен выработаться стойкий рвотный рефлекс от такой работы. Вот, взгляни, как должна выглядеть на самом деле твоя работа:

// конфиг
var base_url = 'http://site.com/templates/template-name/css/color-scheme/color_';
var all_colors = [
     '2A6F66'
    ,'3E94B2'
    ,'3F4B6E'
    ,'7C5469'
    ,'282c2f'
    ,'564C6E'
    ,'685A44'
    ,'809D75'
    ,'34233F'
    ,'77758D'
    ,'577038'
    ,'858585'
    ,'B24D1B'
    ,'B5654B'
    ,'B23831'
    ,'BB9E8E'
    ,'BD6578'
    ,'C49A1C'
    ,'C54B54'
    ,'E1B52D'
];
// добавляем в head ОДИН пустой файл css чтобы потом менять его href
$('head').append('<link rel="stylesheet" type="text/css" href="" id="custom_style">');
// вешаем обработчик на каждую из кнопок с цветами
$.each(all_colors, function( index, color ) {
    $('.color_'+color).click(function() {
        // указываем новый href
        $('#custom_style').attr('href', base_url+color+'.css')
        // запоминаем цвет
        $.cookie('js_activeColor', color);
    });
});
// при начальной загрузке ставим цвет который запомнили в href
var old_color = $.cookie('js_activeColor');
$('#custom_style').attr('href', base_url+old_color+'.css')

Создание интернет-магазина строительных материалов в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Отметить чекбокс jquery

Я пытаюсь отметить чекбокс при нажатии, использую атрибут checkedНапример если стоит галочка для атрибута Возраст, то появляется поле ввода...

277

jQuery

Как реализовать аналог $(document).ready на чистом JS?

Тоже самое только на JSКак перевести?

421

jQuery

Найти ссылку по содержимому и заменить текст. Как сделать на JS?

Нужно найти ссылку по тексту "Pages" и если такая ссылка присутствует на странице, тогда поменять ее текст на SponsorshipИнтересует реализация на jQuery...

349

jQuery

jQuery: зависимость высота от контейнера

Как сделать что если высотаcontainer больше высоты

243