我试图添加一个非常简单的方法来切换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>
