1

我正在开发一个网络应用程序并切换样式表以让用户选择不同的主题。

我有以下代码：

$('#theme_selector_white').click(function (){
   $('link[href="default_teal.css"]').attr('href','white_style.css');
});
$('#theme_selector_teal').click(function (){
   $('link[href="white_style.css"]').attr('href','default_teal.css');
});  
$('#theme_selector_sopia').click(function (){
   $('link[href="    "]').attr('href','sopia_style.css');
});

如果交替使用 2 个不同的样式表，我的代码可以工作，但是一旦我添加了第三个样式表，我需要检查当前的样式表是什么，以便我可以用预期的样式表替换当前的样式表。

我相信我需要为每个选择器做这样的事情：

$('#theme_selector_white').click(function(){
     if ( current stylesheet == "default_teal.css") {
           //replace default_teal.css with intended stylesheet
     }
     else {
          //replace sopia_style.css with intended stylesheet

     }

我需要帮助编写条件以检查当前样式表。

我将非常感谢任何帮助..

4

2 回答 2

3

给你的链接元素一个 id

<link id="userSelectedCss" ...>

然后瞄准它

$('#theme_selector_white').click(function (){
 $('#userSelectedCss').attr('href','white_style.css');
});
$('#theme_selector_teal').click(function (){
 $('#userSelectedCss').attr('href','default_teal.css');
});  
$('#theme_selector_sopia').click(function (){
 $('#userSelectedCss').attr('href','sopia_style.css');
});
于 2013-06-26T23:28:12.507 回答
2

这是一个干燥的解决方案。首先，正如 Travis 所说，给链接一个 ID：

<link id="userSelectedCss" rel="stylesheet" ...>

然后将您的选择器元素更改为：

<a class="theme_selector" href="#" data-css="white_style.css">White</a>
<a class="theme_selector" href="#" data-css="sopia_style.css">Sopia</a>
<a class="theme_selector" href="#" data-css="default_style.css">Default</a>

并将您的 jQuery 更改为：

$(".theme_selector").click(function(e) {
    e.preventDefault(); // Override the normal link click action.
    $("#userSelectedCss").attr("href", $(this).data("css"));
});
于 2013-06-26T23:33:52.703 回答