带有 Cookie 的样式表切换器使 jQuery 的重复性降低

Question

我对 jQuery 很感兴趣，但我知道我需要什么，这很有效，但是它非常重复，并且当需要管理多个 cookie 和样式表时会变得非常烦人。

问题：如何减少重复性以便可以使用多种样式：

// USING: https://github.com/carhartl/jquery-cookie

$(document).ready(function () {

    $("#red").click(function () {

        $.cookie("red", 1);
        $.removeCookie("blue");

        var fileref = document.createElement("link");
        fileref.setAttribute("rel", "stylesheet");
        fileref.setAttribute("type", "text/css");
        fileref.setAttribute("href", "assets/css/red.css");
        document.getElementsByTagName("head")[0].appendChild(fileref);

        $('.logo-svg').attr('src', 'assets/images/logo-red/logo.svg');

        return false;

    });

    $("#blue").click(function () {
        $.removeCookie("red");
        $.cookie("blue", 1);

        var fileref = document.createElement("link");
        fileref.setAttribute("rel", "stylesheet");
        fileref.setAttribute("type", "text/css");
        fileref.setAttribute("href", "assets/css/blue.css");
        document.getElementsByTagName("head")[0].appendChild(fileref);

        $('.logo-svg').attr('src', 'assets/images/logo-blue/logo.svg');
        return false;

    });

});


$(window).load(function () {

    if ($.cookie('red')) {
        $('.logo-svg').attr('src', 'assets/images/logo-red/logo.svg');
        var fileref = document.createElement("link");
        fileref.setAttribute("rel", "stylesheet");
        fileref.setAttribute("type", "text/css");
        fileref.setAttribute("href", "assets/css/red.css");
        document.getElementsByTagName("head")[0].appendChild(fileref);
    }

    if ($.cookie('blue')) {
        $('.logo-svg').attr('src', 'assets/images/logo-blue/logo.svg');
        var fileref = document.createElement("link");
        fileref.setAttribute("rel", "stylesheet");
        fileref.setAttribute("type", "text/css");
        fileref.setAttribute("href", "assets/css/blue.css");
        document.getElementsByTagName("head")[0].appendChild(fileref);
    }

});

HTML

<ul class="styleswitch">
     <li><a id="red" href="#">Red</a></li>
     <li><a id="blue" href="#">Blue</a></li>
</ul>

Answer 1

使用id作为颜色

$(".styleswitch a").click(function () {
    var color = this.id;
    $.removeCookie("blue");
    $.removeCookie("red");
    $.cookie(color, 1);


    var fileref = document.createElement("link");
    fileref.setAttribute("rel", "stylesheet");
    fileref.setAttribute("type", "text/css");
    fileref.setAttribute("href", "assets/css/"+color+".css");
    document.getElementsByTagName("head")[0].appendChild(fileref);

    $('.logo-svg').attr('src', 'assets/images/logo-'+color+'/logo.svg');

    return false;

});

为window.load()创建一个函数（颜色）

function getStyle(cookieColor){
        $('.logo-svg').attr('src', 'assets/images/logo-'+cookieColor+'/logo.svg');
        var fileref = document.createElement("link");
        fileref.setAttribute("rel", "stylesheet");
        fileref.setAttribute("type", "text/css");
        fileref.setAttribute("href", "assets/css/"+cookieColor+".css");
        document.getElementsByTagName("head")[0].appendChild(fileref)
}

$(window).load(function () {
    if ($.cookie('red')) {
        getStyle("red")
    } else if ($.cookie('blue')) {
        getStyle("blue")
    }
});