Style Sheet Switcher с 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

Используйте идентификатор, как цвет

$(".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") 
    } 
});