时间戳

首页 > 解决方案 > Jquery不会在更改时加载所有css文件

jquery - Jquery不会在更改时加载所有css文件

问题描述

我有多个品牌 css 文件，每个都有不同的颜色。我还有一台带有这些品牌选项的收音机。我想要的是，当我更改收音机中的值时，加载特定的 css 文件并删除最后一个。问题是只有第一次加载的 css 显示类，当我更改为第二个选项时，类不加载。

我尝试了两种不同的方法，但没有成功：

$(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 文件不显示类。任何帮助将不胜感激，谢谢

标签： jqueryselectonchange

解决方案

，看起来您只是在添加一个新的样式表，您是否还需要删除之前添加的其他样式表？我看到您删除了所有带有标题的样式表......但是为什么任何样式表都需要标题属性？

我的建议是向要切换的样式表添加一个类或一个 ID，然后更改那些特定的属性值。

因此，如果这是在文档头中：

<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())

推荐阅读