Question

要演示配色模板以重新连接css文件（按下按钮 - 连接新样式文件，然后删除或禁用），设置将保存在cookie中。

有一个代码，它可以工作，但非常繁琐（我想减少它），因为这样的方案+ 20件无法正常运行cookie - 只保留最后添加的文件。

请帮助解决问题。

HTML结构：

<div class="js_color-scheme">
    <div>Color</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的：

$('.color_2A6F66').click(function() {
    $('head').append('<link rel="stylesheet" type="text/css" href="/templates/template-name/css/color-scheme/color_2A6F66.css">');
    $('link[href="/templates/template-name/css/color-scheme/color_3F4B6E.css"]').prop('disabled', true);
    $('link[href="/templates/template-name/css/color-scheme/color_7C5469.css"]').prop('disabled', true);
    $('link[href="/templates/template-name/css/color-scheme/color_282c2f.css"]').prop('disabled', true);
    $('link[href="/templates/template-name/css/color-scheme/color_564C6E.css"]').prop('disabled', true);
    $('link[href="/templates/template-name/css/color-scheme/color_685A44.css"]').prop('disabled', true);
    $('link[href="/templates/template-name/css/color-scheme/color_809D75.css"]').prop('disabled', true);
    $('link[href="/templates/template-name/css/color-scheme/color_34233F.css"]').prop('disabled', true);
    $('link[href="/templates/template-name/css/color-scheme/color_77758D.css"]').prop('disabled', true);
    $('link[href="/templates/template-name/css/color-scheme/color_577038.css"]').prop('disabled', true);
    $('link[href="/templates/template-name/css/color-scheme/color_858585.css"]').prop('disabled', true);
    $('link[href="/templates/template-name/css/color-scheme/color_B24D1B.css"]').prop('disabled', true);
    $('link[href="/templates/template-name/css/color-scheme/color_B5654B.css"]').prop('disabled', true);
    $('link[href="/templates/template-name/css/color-scheme/color_B23831.css"]').prop('disabled', true);
    $('link[href="/templates/template-name/css/color-scheme/color_BB9E8E.css"]').prop('disabled', true);
    $('link[href="/templates/template-name/css/color-scheme/color_BD6578.css"]').prop('disabled', true);
    $('link[href="/templates/template-name/css/color-scheme/color_C49A1C.css"]').prop('disabled', true);
    $('link[href="/templates/template-name/css/color-scheme/color_C54B54.css"]').prop('disabled', true);
    $('link[href="/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="/templates/template-name/css/color-scheme/color_2A6F66.css">');
}


$('.color_3E94B2').click(function() {
    $('head').append('<link rel="stylesheet" type="text/css" href="/templates/template-name/css/color-scheme/color_3E94B2.css">');
    $('link[href="/templates/template-name/css/color-scheme/color_2A6F66.css"]').prop('disabled', true);
    $('link[href="/templates/template-name/css/color-scheme/color_3F4B6E.css"]').prop('disabled', true);
    $('link[href="/templates/template-name/css/color-scheme/color_7C5469.css"]').prop('disabled', true);
    $('link[href="/templates/template-name/css/color-scheme/color_282c2f.css"]').prop('disabled', true);
    $('link[href="/templates/template-name/css/color-scheme/color_564C6E.css"]').prop('disabled', true);
    $('link[href="/templates/template-name/css/color-scheme/color_685A44.css"]').prop('disabled', true);
    $('link[href="/templates/template-name/css/color-scheme/color_809D75.css"]').prop('disabled', true);
    $('link[href="/templates/template-name/css/color-scheme/color_34233F.css"]').prop('disabled', true);
    $('link[href="/templates/template-name/css/color-scheme/color_77758D.css"]').prop('disabled', true);
    $('link[href="/templates/template-name/css/color-scheme/color_577038.css"]').prop('disabled', true);
    $('link[href="/templates/template-name/css/color-scheme/color_858585.css"]').prop('disabled', true);
    $('link[href="/templates/template-name/css/color-scheme/color_B24D1B.css"]').prop('disabled', true);
    $('link[href="/templates/template-name/css/color-scheme/color_B5654B.css"]').prop('disabled', true);
    $('link[href="/templates/template-name/css/color-scheme/color_B23831.css"]').prop('disabled', true);
    $('link[href="/templates/template-name/css/color-scheme/color_BB9E8E.css"]').prop('disabled', true);
    $('link[href="/templates/template-name/css/color-scheme/color_BD6578.css"]').prop('disabled', true);
    $('link[href="/templates/template-name/css/color-scheme/color_C49A1C.css"]').prop('disabled', true);
    $('link[href="/templates/template-name/css/color-scheme/color_C54B54.css"]').prop('disabled', true);
    $('link[href="/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="/templates/template-name/css/color-scheme/color_3E94B2.css">');
}

Answer 1

工作代码：

var base_url = 'full path/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').append('<link rel="stylesheet" type="text/css" href="" id="custom_style">');

$.each(all_colors, function( index, color ) {
    $('.color_'+color).click(function() {
        $('#custom_style').attr('href', base_url+color+'.css')
        $.cookie('js_activeColor', color);
    });
});

var old_color = $.cookie('js_activeColor');
$('#custom_style').attr('href', base_url+old_color+'.css')

重新连接样式表+将设置保存在cookie中

1 个答案: