jquery – 在两个样式表之间切换

我试图添加一个非常简单的方法来切换2个样式表.

我可以在单击时触发样式表,但无法将其切换回原始样式：

<button id="css_toggle" title="I'm a tooltip!">Text</button>
<div class="sq"></div>

$('#css_toggle').click(function () {
  $('link[href="http://localhost:8888/rip-access/wp-content/themes/RIP/assets/css/style.css"]').attr('href','http://localhost:8888/rip-access/wp-content/themes/RIP/assets/css/style1.css').toggle();
});

这是一个非常简单的例子,所以在继续之前我可以理解如何做到这一点.任何想法如何让它切换回第一个样式表？

解决方法

如果由于某种原因无法应用Rory的解决方案,这是另一种考虑的解决方案.简单地切换一个body类并使用这个类作为基本选择器是理想的 – 我最近将这个方法应用于在黑暗和轻量主题之间切换的应用程序,然后将其存储到localStorage,以便“记住”这些更改,例如：

<style>
    .nocturnal-theme p {
       background: black;
       color: white;
    }

    .diurnal-theme p {
       background: white;
       color: black;
    }
</style>

<script>
/* Toggle Theme */
jQuery('.toggle-theme').on('click',function(){
    if(jQuery(this).hasClass('toggle-diurnal')) {
        jQuery('body').removeClass('diurnal-theme').addClass('nocturnal-theme');
        localStorage.setItem('theme','nocturnal-theme');
    } else if(jQuery(this).hasClass('toggle-nocturnal')) {
        jQuery('body').removeClass('nocturnal-theme').addClass('diurnal-theme');
        localStorage.setItem('theme','diurnal-theme');
    }
    var themeSet = localStorage.getItem('theme');
});
</script>

概要

>以下解决方案存储相对文件路径(典型的
标准的wordpress安装)到变量(你可能并不总是有唯一的标识符(id属性值)可供使用,并且因为编辑核心文件,包括一个,不被认为是好的做法(由于这里不会涉及的原因)将这些文件路径存储在变量中可能更好);
>在’#css_toggle’的.click()上,使用.each()方法
循环遍历样式表的所有实例(其中最多的样式表)
可能是少数),它还允许我们重新定义范围
$(这)将证明有助于前进;
>通过循环的每次迭代,当前范围内的链接
将其href属性存储在变量中;
>然后将此属性的存储值与
我们之前存储在变量中的相对文件路径
>如果发现它们包含这些存储的值,则为href
相关链接元素的属性相应更新

代码片段演示：

var defaultSS = '/wp-content/themes/RIP/assets/css/style.css',altSS = '/wp-content/themes/RIP/assets/css/style1.css',hrefAttr;

$('#css_toggle').click(function () {

  $('link').each(function(){
    hrefAttr = $(this).attr('href');
    if (hrefAttr.indexOf(defaultSS) >= 0) {
      $(this).attr('href',altSS);
      
      console.log('Was:',hrefAttr);
      console.log('Now:',$(this).attr('href'));
      
    } else if (hrefAttr.indexOf(altSS) >= 0) {
      $(this).attr('href',defaultSS);
      
      console.log('Was:',$(this).attr('href'));
      
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://localhost:8888/rip-access/wp-content/themes/RIP/assets/css/style.css" type="text/css" media="all">

<button id="css_toggle" title="I'm a tooltip!">Text</button>