Jquery не загружает все CSS-файлы при изменении

Question

У меня есть несколько брендовых CSS-файлов, каждый из которых имеет разные цвета.Также у меня есть радио с этими вариантами брендинга.Что я хочу, так это, когда я изменяю значение в радио, чтобы загрузить определенный файл CSS и удалить последний.Проблема в том, что классы отображаются только при первой загрузке css, когда я переключаюсь на второй вариант, классы не загружаются.

Я пробовал 2 разные вещи, но безуспешно:

$(document).on('change', 'input:radio[name="category"]', function() {
    var $selected = $('input[name=category]:checked').val();
    $('link[title]').remove();
    if ( $(this).val() == $selected ) {
             $('head').prepend('<link rel="stylesheet" href="css/branding/' + $selected + '.css" type="text/css" media="all" title= "' + $selected + '" />');
    }
});

также версия 2:

$(document).on('change', 'input:radio[name="category"]', function() {
    var $selected = $('input[name=category]:checked').val();
    $('link[title]').remove();
    if ( $(this).val() == $selected ) {
                  function showmd( value ) { 
                    $( 'head' ).prepend('<link rel="stylesheet" href="css/branding/' + $selected + '.css" type="text/css" media="all" title= "' + $selected + '" />');
                }
                $.get( $selected, function( data ) {
                    showmd( data );
                }, 'text');
        }
});

Всегда, второй приложенный файл CSS не показывает классы.Любая помощь будет оценена, спасибо

Answer 1

, и похоже, что вы просто добавляете новую таблицу стилей, вам также нужно удалить другие, которые были добавлены ранее? Я вижу, что вы удаляете все таблицы стилей с заголовками ... но зачем любой таблице стилей нужен атрибут title?

Я предлагаю добавить класс или идентификатор в таблицу стилей, которую вы хотите отключить, и просто изменить значение этого конкретного атрибута.

Так что, если это было в заголовке документа:

<link id="branding-stylesheet" rel="stylesheet" href="css/branding/example.css" type="text/css" media="all" />

var $brandingStylesheet = $("#branding-stylesheet");
var $radios = $('input:radio[name="category"]');

$(document).on('change', $radios, function() {
    var val= $radios.filter(':checked').val();
    if (this.value  === val) {
        $brandingStylesheet.attr('href', "css/branding/" + val + ".css")
    }
});

Кроме того, иногда это может быть проблема с кэшем браузера, и если это так, вы можете добавить строку запроса в конце URL-адреса, чтобы помочь устранить это.

.attr('href', "css/branding/" + val + ".css?cachebreaker=" + Date.now())