2014-11-03 124 views
0

我正在添加三个按钮并使用单个类进行管理。但我得到这个未定义的错误。定义类后的未定义对象

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); 
    } 



}); 

在此先感谢

+0

尝试将类定义和原型移到onload函数之外。 – Xlander 2014-11-03 07:52:43

+1

你可以用你的特定问题创建[fiddle](http://fiddle.jshell.net/)吗?它会更容易帮助:) – Kutyel 2014-11-03 07:55:03

+0

我想指出与实际答案无关,您应该使用PascalCase命名您的构造函数 - 许多lint工具将查找PascalCase函数并尝试应用一些约束,就好像它们一样'重新构造函数(例如检查你是否没有新的称呼) – Sacho 2014-11-03 08:10:24

回答

2

当你打电话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'); 

    }); 
}); 
0

由于Xlander写道尝试移动类定义和原型的onload功能之外,或只是把它们在你的代码尝试使用它们之前。

2

当您在代码中创建对象时,函数未定义。试着重新排序这样,

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'); 

    }); 
});