使用jquery更改页面样式时出错
hma*_*avi 14 html css asp.net jquery dotnetnuke-7
我用它jquery-style-switcher.js来改变一些元素的风格.当我点击页面的颜色样式不会改变时,在此页面的源代码中将此类添加jssError error level0到ul包含颜色的标记中.此代码在HTML页面中工作,但在CMS中没有!我通过chrome调试这个js文件,并了解当一般html文件中的这个js文件变坏:一个事件调用它执行addClickEvents但在我的网站中使用此模板的网站皮肤:addClickEvents函数不执行.调用addClickEvents的函数是init函数
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值未定义!!!!
为什么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[, path[, 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, sPath, 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>
你可以看到一般网站的模板.我在皮肤中使用这个模板,dotnetnuke7出现了这个问题.
您几乎已经成功了，只是这里需要修复一些问题。
这些步骤适用于“下载我的代码”存档中的文件。
首先，在处理点击颜色主题方形图标时，您的代码会抛出以下 JS 错误：
Uncaught TypeError: Cannot read property 'top' of undefined
在你的main.js, 更改clickMenu功能。将调用包装在必须定义的$('html, body').animate条件中section。
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#colour-variations
<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。希望能帮助到你！