大佬教程收集整理的这篇文章主要介绍了使用jquery的页面更改样式出错，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
init: function ($root,config) { this.$root = $root; this.config = config ? config : {}; this.setDefaultTheme(); if(this.defaultThemE) { // try cookies if (this.config.cookiE) { this.checkCookie(); } // try hover if (this.config.hasPreview) { this.addHoverEvents(); } // finally,add click events this.addClickEvents(); } else { this.$root.addClass('jssError error level0'); } }
在这个函数(init)中：defaultTheme值是undefined !!!!
为什么defaultTheme是未定义的？如果你能回答这个问题,问题就会解决.
jquery-style-switcher.js：
(function ($) { var jStyleSwitcher,_defaultOptions = { hasPreview: true,defaultThemEID: 'jssDefault',fullPath: 'css/',cookie: { expires: 30,ismanagingLoad: true } },// private _cookieKey = 'jss_SELEcted',_docCookies = {}; /*\ |*| |*| :: cookies.js :: |*| |*| A complete cookies reader/writer framework with full unicode support. |*| |*| revision #1 |*| |*| https://developer.mozilla.org/en-US/docs/Web/API/document.cookie |*| |*| This framework is released under the GNU Public License,version 3 or later. |*| http://www.gnu.org/licenses/gpl-3.0-standalone.html |*| |*| Syntaxes: |*| |*| * docCookies.setItem(name,value[,end[,path[,domain[,secure]]]]) |*| * docCookies.getItem(Name) |*| * docCookies.removeItem(name[,domain]]) |*| * docCookies.hasItem(Name) |*| * docCookies.keys() |*| \*/ _docCookies = { getItem: function (sKey) { if (!sKey) { return null; } return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g,"\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"),"$1")) || null; },setItem: function (sKey,sValue,vEnd,sPath,sDomain,bSecurE) { if (!sKey || /^(?:expires|max\-age|path|domain|securE)$/i.test(sKey)) { return false; } var sExpires = ""; if (vEnd) { switch (vEnd.constructor) { case number: sExpires = vEnd === Infinity ? "; expires=Fri,31 Dec 9999 23:59:59 GMT" : "; max-age=" + vEnd; break; case String: sExpires = "; expires=" + vEnd; break; case Date: sExpires = "; expires=" + vEnd.toUTCString(); break; } } document.cookie = encodeURIComponent(sKey) + "=" + encodeURIComponent(svalue) + sExpires + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "") + (bSecure ? "; secure" : ""); return true; },removeItem: function (sKey,sDomain) { if (!this.hasItem(sKey)) { return false; } document.cookie = encodeURIComponent(sKey) + "=; expires=Thu,01 Jan 1970 00:00:00 GMT" + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : ""); return true; },hasItem: function (sKey) { if (!sKey) { return false; } return (new RegExp("(?:^|;\\s*)" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g,"\\$&") + "\\s*\\=")).test(document.cookiE); },keys: function () { var aKeys = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g,"").split(/\s*(?:\=[^;]*)?;\s*/); for (var nLen = aKeys.length,nIdx = 0; nIdx < nLen; nIdx++) { aKeys[nIdx] = decodeURIComponent(aKeys[nIdx]); } return aKeys; } }; jStyleSwitcher = function ($root,config) { return this.init($root,config); }; jStyleSwitcher.prototype = { /** * {Object} DOM reference to style option list */ $root: null,/** * {Object} configs for the style switcher */ config: {},/** * {Object} jQuery reference to <link> tag for swapping CSS */ $themeCss: null,/** * {String} default theme page was loaded with */ defaultTheme: null,init: function ($root,config) { this.$root = $root; this.config = config ? config : {}; this.setDefaultTheme(); if(this.defaultThemE) { // try cookies if (this.config.cookiE) { this.checkCookie(); } // try hover if (this.config.hasPreview) { this.addHoverEvents(); } // finally,add click events this.addClickEvents(); } else { this.$root.addClass('jssError error level0'); } },setDefaultTheme: function () { this.$themeCss = $('link[id=' + this.config.defaultThemEID + ']'); if(this.$themeCss.length) { this.defaultTheme = this.$themeCss.attr('href'); } },resetStyle: function() { this.updateStyle(this.defaultThemE); },updateStyle: function(newStylE) { this.$themeCss.attr('href',newStylE); },getFullAssetPath: function(asset) { return this.config.fullPath + asset + '.css'; },checkCookie: function () { var styleCookie; // if using cookies and using JavaScript to load css if (this.config.cookie && this.config.cookie.ismanagingLoad) { // check if css is set in cookie styleCookie = _docCookies.getItem(_cookieKey); if (styleCookiE) { newStyle = this.getFullAssetPath(styleCookiE); // update link tag this.updateStyle(newStylE); // update default ref this.defaultTheme = newStyle; } } },addHoverEvents: function () { var self = this; this.$root.find('a').hover( function () { var asset = $(this).data('theme'),newStyle = self.getFullAssetPath(asset); // update link tag self.updateStyle(newStylE); },function () { // reset link tag self.resetStyle(); } ); },addClickEvents: function () { var self = this; this.$root.find('a').click( function () { var asset = $(this).data('theme'),newStyle = self.getFullAssetPath(asset); // update link tag self.updateStyle(newStylE); // update default ref self.defaultTheme = newStyle; // try to store cookie if (self.config.cookiE) { _docCookies.setItem(_cookieKey,asset,self.config.cookie.expires,'/'); } } ); } }; $.fn.styleSwitcher = function (options) { return new jStyleSwitcher(this,$.extend(true,_defaultOptions,options)); }; })(jQuery);
本页的HTML页面：
<div id="colour-variations">
<a class="option-toggle"><i class="icon-gear"></i></a>
<h3>Preset Colors</h3>
<ul class="jssError error level0">
<li><a href="javascript: void(0);" data-theme="style"></a></li>
<li><a href="javascript: void(0);" data-theme="pink"></a></li>
<li><a href="javascript: void(0);" data-theme="blue"></a></li>
<li><a href="javascript: void(0);" data-theme="turquoise"></a></li>
<li><a href="javascript: void(0);" data-theme="orange"></a></li>
<li><a href="javascript: void(0);" data-theme="lightblue"></a></li>
<li><a href="javascript: void(0);" data-theme="brown"></a></li>
<li><a href="javascript: void(0);" data-theme="green"></a></li>
</ul>
</div>
首先,当处理点击颜色主题方形图标时,您的代码会抛出此JS错误：
Uncaught TypeError: CAnnot read property 'top' of undefined
在您的main.js中,更改clickMenu功能.调用$(‘html,body’).在必须定义该部分的条件下生成动画.
var clickMenu = function() { $('a:not([class="external"])').click(function(event){ var section = $(this).data('nav-section'),navbar = $('#navbar'); if(section){ // <- this wrap condition $('html,body').animate({ scrollTop: $('[data-section="' + section + '"]').offset().top },2000); } if ( navbar.is(':visible')) { navbar.removeClass('in'); navbar.attr('aria-expanded','false'); $('.js-fh5co-nav-toggle').removeClass('active'); } event.preventDefault(); return false; }); };
其次,在你的switcher.html中,在第799行,你已经离开(可能是有意的)#“颜色变化”元素中的“jssError error level0”
<ul class="jssError error level0"> ... </ul>
所以删除这些类：
<ul> ... </ul>
最后一点：添加< link>在< head>
<link type="text/css" rel="stylesheet" id="theme-switch" href="style.css">
插件需要正确初始化.没有这一行是你得到“jssError error level0”错误的原因.
我也做了一个.zip with working code.希望它有帮助！
以上是大佬教程为你收集整理的使用jquery的页面更改样式出错全部内容，希望文章能够帮你解决使用jquery的页面更改样式出错所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。