Question

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

我有以下代码：

$('#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

     }

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

我真的很感激任何帮助..

Answer 1

为您的链接元素提供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');
});

Answer 2

这是一个DRY解决方案。首先，正如特拉维斯所说，给链接一个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"));
});

Jquery if语句检查当前样式表

2 个答案: