定义类后的未定义对象
问题描述:
我正在添加三个按钮并使用单个类进行管理。但我得到这个未定义的错误。定义类后的未定义对象
var jQuery = jQuery.noConflict();
jQuery(function(){
var sampTool = new loadToolBar('pageContent');
sampTool.addImgBtn("fontMore","img/plus.png"); // Uncaught TypeError: undefined is not a function
sampTool.addImgBtn("fontLess","img/minus.png");
sampTool.addImgBtn("printPage","img/printer.png");
jQuery('#fontMore').click(function(){
sampTool.zoom('pageContent','+=2px');
});
jQuery('#fontLess').click(function(){
sampTool.zoom('pageContent','-=2px');
});
function loadToolBar(fileBody) // Class definition
{
var toolBar = document.createElement("div");
toolBar.className = "oasys-toolbar";
toolBar.id = "oasys-toolbar";
jQuery(toolBar).insertBefore("#"+fileBody);
}
/*--------------------- Prototypes------------------------*/
loadToolBar.prototype.addImgBtn = function(itemID,itemPath)
{
var newIcon = document.createElement("img");
newIcon.id=itemID;
newIcon.src = itemPath;
newIcon.className = "oasys-toolbar-item oasys-toolbar-btn";
document.getElementById('oasys-toolbar').appendChild(newIcon);
}
loadToolBar.prototype.zoom = function(containerID,size)
{
jQuery("#"+containerID+" *").css("font-size",size);
}
});
在此先感谢
答
当你打电话loadToolBar.addImgBtn()
的功能可按,addImgBtn
,尚未分配到loadToolBar.prototype
。
你需要运行你的类声明然后执行它。我会这样写:
var jQuery = jQuery.noConflict();
function loadToolBar(fileBody) // Class definition
{
var toolBar = document.createElement("div");
toolBar.className = "oasys-toolbar";
toolBar.id = "oasys-toolbar";
jQuery(toolBar).insertBefore("#" + fileBody);
}
/*--------------------- Prototypes------------------------*/
loadToolBar.prototype.addImgBtn = function(itemID, itemPath) {
var newIcon = document.createElement("img");
newIcon.id = itemID;
newIcon.src = itemPath;
newIcon.className = "oasys-toolbar-item oasys-toolbar-btn";
document.getElementById('oasys-toolbar').appendChild(newIcon);
};
loadToolBar.prototype.zoom = function(containerID, size) {
jQuery("#" + containerID + " *").css("font-size", size);
};
jQuery(function() {
// This function runs after `document.ready`. But your constrator don't need to declare after dom ready
var sampTool = new loadToolBar('pageContent');
sampTool.addImgBtn("fontMore", "img/plus.png"); // Uncaught TypeError: undefined is not a function
sampTool.addImgBtn("fontLess", "img/minus.png");
sampTool.addImgBtn("printPage", "img/printer.png");
jQuery('#fontMore').click(function() {
sampTool.zoom('pageContent', '+=2px');
});
jQuery('#fontLess').click(function() {
sampTool.zoom('pageContent', '-=2px');
});
});
答
由于Xlander写道尝试移动类定义和原型的onload功能之外,或只是把它们在你的代码尝试使用它们之前。
答
当您在代码中创建对象时,函数未定义。试着重新排序这样,
var jQuery = jQuery.noConflict();
jQuery(function(){
function loadToolBar(fileBody) // Class definition
{
var toolBar = document.createElement("div");
toolBar.className = "oasys-toolbar";
toolBar.id = "oasys-toolbar";
jQuery(toolBar).insertBefore("#"+fileBody);
}
/*--------------------- Prototypes------------------------*/
loadToolBar.prototype.addImgBtn = function(itemID,itemPath)
{
var newIcon = document.createElement("img");
newIcon.id=itemID;
newIcon.src = itemPath;
newIcon.className = "oasys-toolbar-item oasys-toolbar-btn";
document.getElementById('oasys-toolbar').appendChild(newIcon);
}
loadToolBar.prototype.zoom = function(containerID,size)
{
jQuery("#"+containerID+" *").css("font-size",size);
}
var sampTool = new loadToolBar('pageContent');
sampTool.addImgBtn("fontMore","img/plus.png"); // Uncaught TypeError: undefined is not a function
sampTool.addImgBtn("fontLess","img/minus.png");
sampTool.addImgBtn("printPage","img/printer.png");
jQuery('#fontMore').click(function(){
sampTool.zoom('pageContent','+=2px');
});
jQuery('#fontLess').click(function(){
sampTool.zoom('pageContent','-=2px');
});
});
尝试将类定义和原型移到onload函数之外。 – Xlander 2014-11-03 07:52:43
你可以用你的特定问题创建[fiddle](http://fiddle.jshell.net/)吗?它会更容易帮助:) – Kutyel 2014-11-03 07:55:03
我想指出与实际答案无关,您应该使用PascalCase命名您的构造函数 - 许多lint工具将查找PascalCase函数并尝试应用一些约束,就好像它们一样'重新构造函数(例如检查你是否没有新的称呼) – Sacho 2014-11-03 08:10:24