JQuery CSS 转换器无法正常工作

Question

所以我之前发布了一个关于此的问题，在获得有用的回复后，我开始尝试尝试该代码。我以前没有使用过 JQuery，所以这对我来说是超越 self 的一步。

我正在做的是使用下面的代码来更改网站的 CSS，几乎就像一个模板，但是，当按下按钮时，没有任何变化。我包含了链接到 Google 的 JQuery 脚本。代码本身很容易解释，当您按下按钮时，它应该加载不同的样式表。我不确定这是否是永久性更改，但只是暂时进行测试。感谢您的帮助!

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js?ver=1.4.2'></script>

<script type="text/javascript">

$("button#grayscale").click(function() { 
    $("link[rel=stylesheet2]").attr({href : "css2.css"}); });

$("button#original").click(function() { 
    $("link[rel=stylesheet]").attr({href : "css.css"}); });
});

<button id="original">Original</button><br />
                <button id="grayscale">Grayscale</button>

Answer 1

我认为您应该遵循@undefined 的建议并将类前缀应用于您的所有规则。然后，您可以将该类应用于更高层的元素，这意味着如果您更改类，一切都会随之发生变化:

CSS:

body.grayscale div{
    color: gray;
}

body.normal div{
    color: green;
}

JS:

$("button#original").click(function() { 
    $("body").removeClass("grayscale"); 
    $("body").addClass("normal"); 
});

$("button#grayscale").click(function() { 
    $("body").removeClass("normal"); 
    $("body").addClass("grayscale"); 
});