【问题标题】:css + jQuery style.css switcher for new jQuery version用于新 jQuery 版本的 css + jQuery style.css 切换器
【发布时间】:2013-08-28 22:28:30
【问题描述】:

我一直在关注 javascript css 切换器的 Kevin Luck 示例。 http://www.kelvinluck.com/assets/jquery/styleswitch/index.html

我让它在我的本地项目中工作。 我的问题/问题是,当我使用 Kevin Luck 使用的旧 javascript 时,它可以工作。 当我尝试更新 jQuery 版本时,它会中断。如何更新此示例以使用最新的 1.10.2 jQuery?

索引页面是这样的(相关部分)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Public Identity</title>

    <link rel="stylesheet" type="text/css" href="css/collegeStyles.css" title="college" media="screen" />
    <link rel="alternate stylesheet" type="text/css" href="css/corporateStyles.css" title="corporate" media="screen" />

    <!-- Google CDN jquery -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
    <!-- // <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> -->
    <!-- css style switcher -->
    <script type="text/javascript" src="styleswitch.js"></script>

jQuery (styleswitcher.js) 看起来像这样

/**
* Styleswitch stylesheet switcher built on jQuery
* Under an Attribution, Share Alike License
* By Kelvin Luck ( http://www.kelvinluck.com/ )
**/

(function($)
{

    $(document).ready(function() {
        $('.styleswitch').click(function()
        {
            switchStylestyle(this.getAttribute("rel"));
            return false;
        });
        var c = readCookie('style');
        if (c) switchStylestyle(c);
    });

    function switchStylestyle(styleName)
    {
        $('link[@rel*=style][title]').each(function(i) 
        {
            this.disabled = true;
            if (this.getAttribute('title') == styleName) this.disabled = false;
        });
        createCookie('style', styleName, 365);
    }
})(jQuery);
// cookie functions http://www.quirksmode.org/js/cookies.html
function createCookie(name,value,days)
{
    if (days)
    {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name)
{
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++)
    {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}
function eraseCookie(name)
{
    createCookie(name,"",-1);
}
// /cookie functions

唯一相关的 CSS 是样式表名称,它们被称为学院和公司。您可以在上面的 php/html 代码中看到它们。 我很困惑为什么这会中断,并且不知道如何解决。任何想法都会非常有帮助。 谢谢!

【问题讨论】:

  • 控制台窗口有错误吗?
  • 是,未捕获的错误:语法错误,无法识别的表达式:link[@rel*=style][title] jquery.js:1850 at.error jquery.js:1850 mt jquery.js:2460 kt jquery.js:2847 at jquery.js:1289 x.fn.extend.find jquery.js:5730 x.fn.x.init jquery.js:197 x jquery.js:63 switchStylestyle styleswitch.js:22(匿名函数) styleswitch.js:17 c jquery.js:3048 p.fireWith jquery.js:3160 x.extend.ready jquery.js:433 q
  • 在我看来它与这一行特别相​​关:$('link[@rel*=style][title]').each(function(i)

标签: php javascript jquery css styleswitching


【解决方案1】:

改变

$('link[@rel*=style][title]').each(function(i) 

$('link[rel*=style][title]').each(function(i) 

from jQuery documentation:

在 jQuery 1.3 [@attr] 样式选择器被删除(它们是 以前在 jQuery 1.2 中已弃用)。只需删除“@”符号 从您的选择器中提取,以使它们再次工作。

【讨论】:

  • 这样做了,它马上就奏效了!我尝试同时删除 @ 和 * 但这没有用。那么,* 有什么作用呢?非常感谢!
  • * 是一个通配符选择器,因此它将匹配任何具有包含“样式”的rel 属性的link 元素
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2011-01-08
  • 1970-01-01
  • 1970-01-01
  • 2017-07-02
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多