Question

首先我是jQuery的新手所以请耐心等待我：）

我正在尝试在按钮点击的同时切换多个样式表，这是我正在使用的代码...不确定为什么它不起作用:(任何人都可以帮忙吗？

这是CSS：

<link title="default" rel="stylesheet" type="text/css" href="_includes/css/default_style.css" />
<link media="print" href="_includes/css/print.css" rel="stylesheet" type="text/css" />

使用Javascript：

<script>
$('#default').click(function (){
    $('link[title="theme"]').removeAttr('href').attr('href','_includes/css/default_style.css');
    $('link[media="print"]').removeAttr('href').attr('href','_includes/css/print.css');
});
$('#monochrome').click(function (){
    $('link[title="theme"]').removeAttr('href').attr('href','_includes/css/mono_style.css');
    $('link[media="print"]').removeAttr('href').attr('href','_includes/css/print.css');
});
$('#annotation').click(function (){
    $('link[title="theme"]').removeAttr('href').attr('href','_includes/css/acrf_style.css');
    $('link[media="print"]').removeAttr('href').attr('href','_includes/css/acrfprint.css');
});
</script>

和HTML

<button id="default">Default</button>
<button id="monochrome">Monochrome</button>
<button id="annotation">Annotations</button>

Answer 1

我不确定你的问题是什么，因为可能有很多，所以我在这里概述一下。我也尝试过改进它。

首先，您没有在页面中提到您的脚本在哪里。如果你把它放在头部，那么你需要将它包装在$("document").ready(function(){});监听器中，否则你的按钮将无法找到。

其次，你不需要它，但最佳做法是传递事件并阻止对按钮的默认操作。现在没关系，只是继续这样做。

第三，你重复了一下，为什么不将它包装在一个你可以轻松调用的函数中呢？这是这一切的样子：

function switchStyleSheets(theme, print){
  $('link[title="theme"]').attr('href', theme);
  $('link[media="print"]').attr('href', print);
}

$(document).ready(function(){
    $('#default').click(function(event){
        event.preventDefault();
        switchStyleSheets(
            '_includes/css/default_style.css',
            '_includes/css/default_print.css'
        );
    });
    $('#monochrome').click(function(event){
        event.preventDefault();
        switchStyleSheets(
            '_includes/css/print_style.css',
            '_includes/css/print_print.css'
        );
    });
    $('#annotation').click(function(event){
        event.preventDefault();
        switchStyleSheets(
            '_includes/css/annoted_style.css',
            '_includes/css/annoted_print.css'
        );
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<button id="default">Default</button>
<button id="monochrome">Monochrome</button>
<button id="annotation">Annotations</button>

但这也不是好习惯！您正在切换每次切换时需要加载的文件。这很糟糕的原因是文件需要时间加载，同时你失去了所有的造型！如果您的文件是几千字节，可能看起来不是很多，但更大的文件和更慢的连接开始使这个变坏！所以这是一个更好的解决方案：

$(document).ready(function(){
    /* To easily remove all styles later, lets make a string that lists them all */
    var allStyles = "";
    $("button[data-style]").each(function(){
        /* Add the data-style attribute to the all string */
        allStyles += $(this).data("style") + " ";
    }).click(function(event){
        /* Get the class from the button */
        var style = $(this).data("style");
        /* Remove all the classes, then add this single on */
        $("body").removeClass(allStyles).addClass(style);
    });
});

/* Define all your classes as body classes */
body.default {
    background: red;
}
body.mono {
    background: black;
}
body.annotated {
    background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<!-- Give every button a data-style attribute or value that we can read on click. -->
<button id="default" data-style="default">Default</button>
<button id="monochrome" data-style="mono">Monochrome</button>
<button id="annotation" data-style="annotated">Annotations</button>

你还提到CSS is hugely different for the print files。好吧，那就是为制作媒体查询。以下内容允许您在一个文件中定义所有内容：

body.default { background: red; } body.mono { background: black; } body.annotated { background: blue; } @media print { body.default { background: red; } body.mono { background: black; } body.annotated { background: blue; } }

目的是学习有效地使用媒体查询。现在，这有一些限制（IE有规则限制），但它比动态切换文件更好。

Answer 2

我设法在@somethinghere和@MelanciaUK

的帮助下解决了这个问题

我将Javascript更改为：

<script>
$("document").ready(function(){
    $('#default').click(function (){
        $('link').first().attr('href','_includes/css/default_style.css');
        $('link[media="print"]').attr('href','_includes/css/print.css');
    });
    $('#monochrome').click(function (){
        $('link').first().attr('href','_includes/css/mono_style.css');
        $('link[media="print"]').attr('href','_includes/css/print.css');
    });
    $('#annotation').click(function (){
        $('link').first().attr('href','_includes/css/acrf_style.css');
        $('link[media="print"]').attr('href','_includes/css/acrfprint.css');
    });
});
</script>

基本上我将$（“document”）。ready（function（）{添加到脚本顶部，因为它在head标签中被调用，然后我更改了引用（'link [title =“theme”] '）到（'link'）。first（），我在调试器中发现打印css文件正在被交换，但脚本没有主动更改主题，我通过让脚本查看第一个引用来解决这个问题链接标记并更改其中的引用。

感谢大家的帮助，并感谢那些贬低的人。

同时切换多个样式表（jQuery）

2 个答案: